/* ============================================================
   IndieTacticsOS — Windows-style desktop CSS
   ============================================================ */

:root {
  --win-bg: #008080;
  --win-title-active: #000080;
  --win-title-inactive: #7a7a7a;
  --win-title-text: #ffffff;
  --win-border: #dfdfdf #808080 #808080 #dfdfdf;
  --win-border-inner: #ffffff #bdbdbd #bdbdbd #ffffff;
  --win-body-bg: #c0c0c0;
  --win-btn-bg: #c0c0c0;
  --taskbar-bg: #c0c0c0;
  --taskbar-border: #dfdfdf;
  --accent: #ffd700;
  --accent2: #ff6b35;
  --green: #00c851;
  --font-mono: 'Share Tech Mono', monospace;
  --font-pixel: 'Press Start 2P', monospace;
  --font-vt: 'VT323', monospace;
  --strip-h: 28px;
  --taskbar-h: 36px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-mono);
  background: var(--win-bg);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  user-select: none;
}

/* ============ BOOT SCREEN ============ */
#bootScreen {
  position: fixed; inset: 0;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  flex-direction: column;
}

.boot-content { text-align: center; color: #fff; }

.boot-logo {
  font-family: var(--font-pixel);
  font-size: clamp(1.1rem, 4vw, 2.4rem);
  color: var(--accent);
  margin-bottom: 12px;
  text-shadow: 0 0 20px #ffd70088;
}

.blink { animation: blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.boot-version {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: #888;
  margin-bottom: 30px;
}

.boot-bar-wrap {
  width: 320px; height: 18px;
  border: 1px solid #444;
  background: #111;
  margin: 0 auto 12px;
  overflow: hidden;
}

.boot-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0066ff, #00c8ff);
  transition: width 0.15s ease;
  box-shadow: 0 0 8px #0088ff99;
}

.boot-msg {
  font-size: 0.86rem;
  color: #666;
  min-height: 20px;
}

/* ============ TASKBAR ============ */
#taskbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--taskbar-h);
  background: var(--taskbar-bg);
  border-top: 2px solid var(--taskbar-border);
  box-shadow: inset 0 1px 0 #fff;
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  /* Above every window (focused windows get a growing inline z-index, capped/
     renormalized in JS below ~9000), so the Start button is never covered. */
  z-index: 100000;
}

.taskbar-left { display: flex; align-items: center; gap: 4px; flex: 1; overflow: hidden; }
.taskbar-right { display: flex; align-items: center; gap: 8px; padding-right: 6px; border-left: 1px solid #808080; padding-left: 8px; }

.start-btn {
  background: var(--win-btn-bg);
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  padding: 2px 10px;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.start-btn:active { border-color: #808080 #fff #fff #808080; }
.start-btn:hover { background: #d4d0c8; }

.taskbar-divider { width: 1px; height: 24px; background: #808080; box-shadow: 1px 0 0 #fff; margin: 0 2px; }

.tray-clock, .tray-date {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: #000;
  white-space: nowrap;
}

.tray-lang {
  font-size: 0.88rem;
  cursor: pointer;
  padding: 2px 10px;
  border: 2px solid #000080;
  background: #000080;
  color: #fff;
  font-weight: bold;
  white-space: nowrap;
}
.tray-lang:hover { background: #1084d0; border-color: #1084d0; }

/* ============ CAMPAIGN STRIP ============ */
#campaignStrip {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--strip-h);
  background: #1a1a2e;
  border-bottom: 1px solid #333;
  display: flex; align-items: center;
  padding: 0 10px;
  gap: 10px;
  z-index: 999;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: #ccc;
}

.campaign-label { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.campaign-spacer { flex: 1; }

.campaign-bar-wrap {
  flex: 1; min-width: 80px; max-width: 200px;
  height: 12px;
  background: #333;
  border: 1px solid #555;
  overflow: hidden;
}

.campaign-bar {
  height: 100%;
  background: linear-gradient(90deg, #00c851, #7bff5a);
  transition: width 0.8s ease;
  box-shadow: 0 0 6px #00c85188;
}

.campaign-pct { font-size: 0.80rem; color: var(--green); min-width: 30px; text-align: right; }

.campaign-stage {
  font-size: 0.72rem;
  color: #bbb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
@media (max-width: 700px) {
  .campaign-stage { display: none; }
}

.anon-strip-phrase {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: center;
  font-size: 0.80rem;
}

#anonStripLabel { color: var(--accent); }

/* ============ DESKTOP AREA ============ */
#desktop {
  position: fixed;
  top: var(--strip-h);
  bottom: var(--taskbar-h);
  left: 0; right: 0;
  overflow: hidden;
}

#desktopIcons {
  position: absolute; inset: 0;
  padding: 8px;
}

/* ============ DESKTOP ICON ============ */
.desktop-icon {
  width: 88px;
  padding: 8px 4px 6px;
  cursor: pointer;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 2px;
  position: absolute;
  touch-action: none;
}

/* Game icon is bigger to attract attention */
#iconGame {
  width: 104px;
}
#iconGame .icon-img {
  font-size: 3.2rem;
}

.desktop-icon:hover, .desktop-icon.selected {
  background: rgba(0,0,128,0.4);
  border-color: rgba(255,255,255,0.5);
}

/* First-visit highlight on the Game icon */
@keyframes icon-glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 2px #ffd700); }
  50%      { filter: drop-shadow(0 0 12px #ffd700) drop-shadow(0 0 4px #fff); }
}
#iconGame.icon-glow .icon-img {
  animation: icon-glow-pulse 1.6s ease-in-out infinite;
}

.icon-balloon {
  position: absolute;
  top: -8px;
  left: calc(100% + 10px);
  background: #ffffcc;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  padding: 6px 10px;
  font-size: 0.8rem;
  font-family: var(--font-mono);
  white-space: nowrap;
  box-shadow: 2px 2px 0 #000;
  z-index: 50;
  pointer-events: none;
  animation: icon-glow-pulse 1.6s ease-in-out infinite;
}
.icon-balloon::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 12px;
  border: 5px solid transparent;
  border-right-color: #808080;
}
.icon-balloon::after {
  content: '';
  position: absolute;
  left: -6px;
  top: 12px;
  border: 4px solid transparent;
  border-right-color: #ffffcc;
}

@media (max-width: 600px) {
  .icon-balloon {
    left: 0;
    top: calc(100% + 4px);
    white-space: normal;
    max-width: 160px;
  }
  .icon-balloon::before, .icon-balloon::after { display: none; }
}

.icon-img { font-size: 2.7rem; line-height: 1; margin-bottom: 4px; }

.icon-label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: #fff;
  text-shadow: 1px 1px 2px #000, -1px -1px 2px #000;
  line-height: 1.2;
}

.icon-sublabel {
  font-size: 0.63rem;
  color: #ddd;
  text-shadow: 1px 1px 1px #000;
  margin-top: 2px;
  font-style: italic;
}

/* ============ WINDOWS ============ */
.win-window {
  position: absolute;
  min-width: 280px;
  min-height: 120px;
  max-width: 95vw;
  max-height: calc(100vh - var(--strip-h) - var(--taskbar-h) - 10px);
  background: var(--win-body-bg);
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 #000;
  display: flex; flex-direction: column;
  overflow: hidden;
  resize: both;
}

.win-window.maximized {
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  height: calc(100vh - var(--strip-h) - var(--taskbar-h)) !important;
  max-width: 100vw !important;
  max-height: calc(100vh - var(--strip-h) - var(--taskbar-h)) !important;
}

.win-titlebar {
  background: linear-gradient(90deg, var(--win-title-active) 0%, #1084d0 100%);
  color: var(--win-title-text);
  padding: 3px 4px;
  display: flex; align-items: center; justify-content: space-between;
  cursor: move;
  min-height: 24px;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: bold;
  flex-shrink: 0;
}

.win-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }

.win-controls { display: flex; gap: 2px; flex-shrink: 0; }

.win-btn {
  width: 18px; height: 16px;
  background: var(--win-btn-bg);
  border: 1px solid;
  border-color: #fff #808080 #808080 #fff;
  cursor: pointer;
  font-size: 0.78rem;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  font-family: var(--font-mono);
}
.win-btn:active { border-color: #808080 #fff #fff #808080; }
.win-close:hover { background: #ff4444; color: #fff; }

.win-statusbar {
  background: var(--win-body-bg);
  border-top: 1px solid #808080;
  padding: 2px 6px;
  font-size: 0.74rem;
  color: #444;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.win-statusbar.top-status {
  border-top: none; border-bottom: 1px solid #808080;
  color: #888;
  font-weight: normal;
}

.win-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  background: #fff;
  user-select: text;
  -webkit-user-select: text;
}

/* ============ FORM STYLES ============ */
.win-label { display: block; font-size: 0.88rem; margin-bottom: 4px; color: #333; font-weight: bold; }
.win-input, .win-select {
  width: 100%;
  border: 2px solid;
  border-color: #808080 #dfdfdf #dfdfdf #808080;
  background: #fff;
  padding: 4px 6px;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  margin-bottom: 10px;
  outline: none;
  color: #000;
}
.win-input:focus { border-color: #000 #dfdfdf #dfdfdf #000; }

.win-primary-btn {
  background: var(--win-btn-bg);
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  padding: 6px 16px;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  cursor: pointer;
  font-weight: bold;
  color: #000;
  margin-top: 4px;
}
.win-primary-btn:hover { background: #d0d0d0; }
.win-primary-btn:active { border-color: #808080 #fff #fff #808080; }
.win-primary-btn.primary { background: var(--win-title-active); color: #fff; border-color: #1084d0 #000080 #000080 #1084d0; }
.win-primary-btn.primary:hover { background: #1084d0; }

/* Neutral gray Win95 push-button (e.g. the "Update" button under the email). */
.win-gray-btn {
  background: var(--win-btn-bg);
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  padding: 5px 14px;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  cursor: pointer;
  color: #000;
}
.win-gray-btn:hover { background: #d0d0d0; }
.win-gray-btn:active { border-color: #808080 #fff #fff #808080; }
.win-gray-btn:disabled { color: #808080; cursor: default; }

.form-step { margin-bottom: 14px; }
.form-section-title {
  font-size: 0.80rem;
  color: #000080;
  font-weight: bold;
  border-bottom: 1px solid #000080;
  margin-bottom: 8px;
  padding-bottom: 2px;
  text-transform: uppercase;
}

.wallet-amount-box {
  background: #fff8d0;
  border: 1px solid #886600;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.wallet-row-label { font-size: 0.82rem; font-weight: bold; margin-bottom: 2px; }
.wallet-amount-val { font-size: 1.5rem; font-weight: bold; color: #000080; font-family: var(--font-vt); margin-bottom: 4px; }
.wallet-display {
  background: #f0f0f0;
  border: 2px solid #808080;
  padding: 10px;
  margin-top: 0;
  word-break: break-all;
}
.wallet-addr { font-size: 0.80rem; color: #000080; margin-top: 4px; margin-bottom: 4px; font-family: var(--font-mono); }
.wallet-copy { font-size: 0.80rem; cursor: pointer; color: #0000cc; text-decoration: underline; white-space: nowrap; }
.wallet-copy:hover { color: #000080; }
.wallet-open-btn {
  display: inline-block;
  font-size: 0.80rem;
  padding: 1px 8px;
  background: #000080;
  color: #fff;
  text-decoration: none;
  border: 1px solid #00004a;
  font-family: var(--font-mono);
  white-space: nowrap;
  cursor: pointer;
}
.wallet-open-btn:hover { background: #1084d0; color: #fff; }
.payment-status { font-weight: bold; font-size: 0.85rem; padding: 4px 8px; display: inline-block; margin-top: 6px; }
.status-waiting { background: #ffff88; border: 1px solid #888800; color: #555500; }
.status-paid { background: #88ff88; border: 1px solid #008800; color: #004400; }
.status-working { background: #88ccff; border: 1px solid #000088; color: #000066; }
.status-done { background: #cc88ff; border: 1px solid #440088; color: #220044; }

/* ── Payment: token / network chooser ── */
.pay-choose-label { font-size: 0.82rem; font-weight: bold; margin-bottom: 4px; }
.pay-options { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-opt {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 5px 12px;
  background: var(--win-btn-bg, #c0c0c0);
  border: 2px solid #fff;
  border-right-color: #404040;
  border-bottom-color: #404040;
  cursor: pointer;
  white-space: nowrap;
}
.pay-opt:hover { background: #d4d0c8; }
.pay-opt-sel {
  background: #000080;
  color: #fff;
  border-color: #00004a #b0b0ff #b0b0ff #00004a;
}
.wallet-expiry { font-size: 0.80rem; color: #555500; margin-top: 6px; font-family: var(--font-mono); }
.pay-expired { color: #aa0000; font-weight: bold; }

/* Plan-upgrade surcharge notice on the payment step (pay only the difference). */
.pay-upgrade-badge {
  background: var(--accent);
  border: 2px solid #000080;
  color: #000;
  font-size: 0.82rem;
  font-weight: bold;
  padding: 7px 10px;
  margin-bottom: 10px;
  font-family: var(--font-mono);
}

/* ============ COMPETITORS WINDOW ============ */
.comp-search-wrap { margin-bottom: 10px; }
.comp-hint { font-size: 0.74rem; color: #666; margin-top: -6px; margin-bottom: 8px; }
.comp-top-hint { background: #ffe8b2; border: 1px solid #e0a800; padding: 8px 12px; margin-bottom: 10px; font-size: 0.82rem; line-height: 1.4; border-radius: 2px; }
.comp-results {
  max-height: 280px; overflow-y: auto;
  border: 2px solid #808080;
  background: #fff;
}
.comp-placeholder { text-align: center; padding: 30px 10px; color: #888; font-size: 0.90rem; }
.comp-item {
  padding: 6px 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.88rem;
}
.comp-item:hover { background: #000080; color: #fff; }
.comp-item:hover .comp-appid { color: #aaf; }
.comp-appid { font-size: 0.74rem; color: #888; }
.comp-item.selected-comp { background: #c8e8ff; }
.comp-item.selected-comp:hover { background: #000080; color: #fff; }

.selected-competitors {
  margin-top: 10px;
  border: 1px solid #000080;
  padding: 8px;
  background: #f0f8ff;
}
.selected-header { font-size: 0.85rem; font-weight: bold; margin-bottom: 6px; color: #000080; }
.selected-tag {
  display: inline-block; background: #000080; color: #fff;
  padding: 2px 8px; margin: 2px; font-size: 0.76rem; cursor: pointer;
  border: 1px solid #0000cc;
}
.selected-tag:hover { background: #ff4444; }

/* ============ STREAMERS WINDOW ============ */
/* lock-content is in normal flow so it's never clipped by the window height */
.streamer-lock {
  display: flex;
  flex-direction: column;
}
.lock-content {
  background: rgba(0,0,0,0.82);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff; gap: 14px;
  padding: 28px 20px;
}
.lock-title { font-size: 1.10rem; font-weight: bold; }
.lock-sub { font-size: 0.90rem; color: #ddd; }

.blurred-table-preview {
  filter: blur(4px); pointer-events: none;
  max-height: 110px; overflow: hidden; opacity: 0.5;
}
.fake-table { width: 100%; border-collapse: collapse; font-size: 0.80rem; }
.fake-table th { background: #c0c0c0; border: 1px solid #808080; padding: 4px 8px; text-align: left; }
.fake-table td { border: 1px solid #ddd; padding: 4px 8px; background: #fff; }

.streamer-filters { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.filter-btn {
  padding: 3px 10px; font-family: var(--font-mono); font-size: 0.82rem;
  background: var(--win-btn-bg); border: 2px solid;
  border-color: #fff #808080 #808080 #fff; cursor: pointer;
}
.filter-btn.active { background: #000080; color: #fff; border-color: #000080; }

/* DataTables manages its own horizontal (scrollX) + vertical (scrollY) scroll —
   don't fix the table to the screen width or add a competing scroll container. */
.streamer-table-wrap { }
.streamer-table { border-collapse: collapse; font-size: 0.82rem; }
.streamer-table th {
  background: #c0c0c0; border: 1px solid #808080;
  padding: 4px 8px; text-align: left; white-space: nowrap;
}
.streamer-table td { border: 1px solid #ddd; padding: 4px 8px; background: #fff; }
.streamer-table tr:hover td { background: #e8f0ff; }
.col-remove { cursor: pointer; color: #cc0000; font-weight: bold; font-size: 0.88rem; }
.col-remove:hover { color: #ff0000; }

/* ============ PRICING ============ */
.pricing-body { background: #f0f0f0 !important; }
.pricing-intro { margin-bottom: 14px; font-size: 0.90rem; line-height: 1.5; }
.pricing-note { color: #000080; font-size: 0.85rem; margin-top: 6px; }

.pricing-cards { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 14px; }
.pricing-card {
  flex: 1; min-width: 180px; max-width: 220px;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  background: #c0c0c0;
  padding: 14px 12px;
  position: relative;
  cursor: pointer;
  transition: transform 0.1s;
  display: flex;
  flex-direction: column;
}
.pricing-card:hover { transform: translateY(-2px); }
.pricing-card.recommended {
  border-color: var(--accent) #886600 #886600 var(--accent);
  background: #fff8d0;
}
.pricing-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #000; font-size: 0.68rem; font-weight: bold;
  padding: 2px 8px; white-space: nowrap; font-family: var(--font-mono);
}
.pricing-plan { font-size: 0.84rem; color: #555; margin-bottom: 4px; text-transform: uppercase; }
.pricing-price { font-size: 1.70rem; font-weight: bold; color: #000080; font-family: var(--font-vt); }
.pricing-price sup { font-size: 0.9rem; }
.pricing-tagline { font-size: 0.76rem; color: #666; margin: 4px 0 10px; font-style: italic; }
.pricing-feature { font-size: 0.78rem; margin: 3px 0; color: #333; }
.pricing-feature::before { content: '✓ '; color: var(--green); font-weight: bold; }
.pricing-anchor {
  font-size: 0.74rem; color: #000080; font-weight: bold; margin-bottom: 8px;
  font-family: var(--font-mono);
}
.pricing-compare { font-size: 0.7rem; color: #777; margin-top: 8px; line-height: 1.3; }
.pricing-cta {
  display: block; width: 100%; margin-top: auto;
  background: var(--win-title-active); color: #fff;
  border: 2px solid; border-color: #1084d0 #000080 #000080 #1084d0;
  padding: 6px; font-family: var(--font-mono); font-size: 0.88rem;
  cursor: pointer; text-align: center;
}
.pricing-cta:hover { background: #1084d0; }

.pricing-footer { font-size: 0.76rem; color: #555; text-align: center; line-height: 1.8; }

/* ============ FAQ ============ */
.faq-body { background: #fff !important; }
.faq-item { margin-bottom: 14px; border-bottom: 1px solid #eee; padding-bottom: 12px; }
.faq-q {
  font-weight: bold; font-size: 0.92rem; color: #000080;
  cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start;
}
.faq-q:hover { color: #0000cc; }
.faq-a { font-size: 0.88rem; color: #333; line-height: 1.5; margin-top: 6px; display: none; }
.faq-a.open { display: block; }
.faq-arrow { margin-left: 8px; flex-shrink: 0; }

/* ============ RECYCLE BIN ============ */
.recycle-info { font-size: 0.82rem; color: #666; margin-bottom: 10px; font-style: italic; }
.recycle-list { min-height: 80px; }
.recycle-empty { text-align: center; padding: 20px; color: #888; font-size: 0.90rem; line-height: 2; }
.recycle-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 6px 8px; border-bottom: 1px solid #ddd; font-size: 0.88rem;
}
.recycle-label {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recycle-actions {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px; flex-shrink: 0;
}
.recycle-timer { font-size: 0.74rem; color: #888; white-space: nowrap; }
.recycle-restore {
  font-size: 0.76rem; cursor: pointer; color: #0000cc;
  text-decoration: underline; white-space: nowrap;
}

/* ============ START MENU ============ */
#startMenu {
  position: fixed; bottom: var(--taskbar-h); left: 0;
  width: 210px; background: var(--win-body-bg);
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  box-shadow: 2px -2px 0 #000;
  z-index: 100002;   /* above the taskbar (and therefore above every window) */
}
.start-menu-header {
  background: linear-gradient(180deg, #000080, #1084d0);
  padding: 12px 10px;
  color: #fff;
}
.start-menu-title { font-size: 0.94rem; font-weight: bold; }
.start-menu-sub { font-size: 0.68rem; color: #aad4ff; margin-top: 2px; }
.start-menu-items { padding: 4px 0; }
.start-item {
  padding: 6px 14px; cursor: pointer;
  font-size: 0.90rem; font-family: var(--font-mono);
}
.start-item:hover { background: #000080; color: #fff; }
.start-item.separator { height: 1px; background: #808080; padding: 0; margin: 4px 0; pointer-events: none; }

/* ============ TRAY POPUP ============ */
.tray-popup {
  position: fixed; bottom: calc(var(--taskbar-h) + 4px);
  right: 4px; background: var(--win-body-bg);
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  z-index: 100002; min-width: 150px;   /* above the taskbar / windows */
}
.tray-popup-item {
  padding: 6px 12px; cursor: pointer;
  font-size: 0.90rem; font-family: var(--font-mono);
}
.tray-popup-item:hover { background: #000080; color: #fff; }


/* ============ TOAST ============ */
.toast-notif {
  position: fixed; bottom: calc(var(--taskbar-h) + 10px); right: 10px;
  background: #ffffcc;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  padding: 8px 14px;
  font-size: 0.88rem;
  z-index: 2000;
  max-width: 280px;
  font-family: var(--font-mono);
  box-shadow: 2px 2px 0 #000;
}

/* ============ TASKBAR WINDOW BUTTONS ============ */
.taskbar-win-btn {
  height: 26px; padding: 0 10px;
  background: var(--win-btn-bg);
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  font-family: var(--font-mono); font-size: 0.82rem;
  cursor: pointer; white-space: nowrap;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}
.taskbar-win-btn.active { border-color: #808080 #fff #fff #808080; background: #d4d0c8; }
.taskbar-win-btn:hover { background: #e0e0e0; }

/* ============ OPEN WINDOWS LIST ============ */
.open-windows-list { display: flex; gap: 2px; overflow-x: auto; }

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: #c0c0c0; }
::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
}
::-webkit-scrollbar-button { background: #c0c0c0; height: 16px; width: 16px; }
::-webkit-scrollbar-corner { background: #c0c0c0; }

/* ============ MOBILE RESPONSIVE ============ */
@media (max-width: 600px) {
  :root { --strip-h: 50px; }

  /* ── Campaign strip: 2 rows ── */
  #campaignStrip {
    height: auto;
    flex-wrap: wrap;
    align-items: center;
    padding: 3px 8px 3px;
    gap: 3px 8px;
    font-size: 0.70rem;
  }
  .campaign-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
  .campaign-label .campaign-spacer { display: none; }
  #countdownLabel { display: none; }
  .campaign-bar-wrap { flex: 1; min-width: 40px; max-width: none; }
  /* Auth buttons wrap to second row, flush right */
  #stripAuthArea {
    flex-basis: 100%;
    justify-content: flex-end;
    padding: 0;
  }

  /* ── Windows: full-screen ── */
  .win-window {
    position: fixed !important;
    top: var(--strip-h) !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100vh - var(--strip-h) - var(--taskbar-h)) !important;
    max-width: 100vw !important;
    max-height: calc(100vh - var(--strip-h) - var(--taskbar-h)) !important;
    resize: none;
  }

  /* ── Pricing cards: stack vertically ── */
  .pricing-cards { flex-direction: column; align-items: center; }
  .pricing-card { min-width: 90%; max-width: 100%; }

  /* ── Desktop icons: position:absolute (same as desktop), JS handles positions ── */
  .desktop-icon { width: 80px !important; }
  #iconGame     { width: 88px !important; }
  #iconGame .icon-img { font-size: 2.4rem; }
  .icon-img { font-size: 2.0rem; }
}

/* ============ Z-INDEX MANAGEMENT ============ */
.win-window { z-index: 100; }
.win-window.focused { z-index: 200; }

/* ============ TRAY BUTTON ============ */
.tray-btn {
  font-size: 1.0rem;
  cursor: pointer;
  padding: 1px 6px;
  border: 1px solid #808080;
  background: var(--win-btn-bg);
  white-space: nowrap;
  line-height: 1;
  user-select: none;
}
.tray-btn:hover { background: #d4d0c8; }
.tray-btn:active { border-color: #808080 #fff #fff #808080; }

/* ============ MEDIA PLAYER ============ */
.player-now {
  background: #000;
  color: #00ff66;
  font-family: var(--font-vt);
  font-size: 1.15rem;
  letter-spacing: 0.5px;
  padding: 6px 10px;
  border: 2px solid;
  border-color: #808080 #dfdfdf #dfdfdf #808080;
  margin-bottom: 10px;
  min-height: 26px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 0 4px #00ff6688;
  flex-shrink: 0;
}

/* Player container fills the window body so the list can flex and the
   progress bar can stick to the very bottom. */
#playerContainer { display: flex; flex-direction: column; height: 100%; }

.player-controls {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
/* Transport buttons hug the left edge, volume controls hug the right edge.
   When the window is too narrow they butt together, then the right group
   wraps onto a second row (margin-left:auto keeps it right-aligned). */
.player-grp { display: flex; align-items: center; gap: 4px; }
.player-grp-right { margin-left: auto; }
.player-btn {
  background: var(--win-btn-bg);
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  cursor: pointer;
  font-size: 1rem;
  padding: 4px 9px;
  line-height: 1;
  font-family: var(--font-mono);
}
.player-btn:hover  { background: #d4d0c8; }
.player-btn:active { border-color: #808080 #fff #fff #808080; }

.player-vol { display: flex; align-items: center; gap: 6px; margin-left: 4px; font-family: var(--font-mono); font-size: 0.8rem; color: #333; }
.player-vol-bars { display: flex; gap: 2px; }
.player-vol-seg {
  width: 6px; height: 14px;
  background: #c0c0c0;
  border: 1px solid #808080;
  cursor: pointer;
}
.player-vol-seg.on { background: var(--green); box-shadow: 0 0 3px #00c85188; }
.player-vol-seg:hover { border-color: #000080; }

/* Playback progress / seek bar — full width, glued to the bottom of the window. */
.player-progress-wrap {
  flex-shrink: 0;
  /* Negative side/bottom margins cancel the win-body padding so the bar
     spans the full window width and sits flush against the bottom edge. */
  margin: 10px -12px -12px -12px;
}
.player-progress {
  position: relative;
  width: 100%;
  height: 20px;
  background: #555;
  border-top: 2px solid #808080;
  cursor: pointer;
  overflow: hidden;
}
.player-progress-fill {
  position: absolute; left: 0; top: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--win-title-active), #1084d0);
  pointer-events: none;
}
/* Time read-out centered on the bar, in a contrasting colour with an outline
   so it stays legible over both the filled and unfilled parts. */
.player-progress-time {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: bold;
  color: var(--accent);
  text-shadow: 0 0 2px #000, 1px 1px 1px #000, -1px -1px 1px #000;
  pointer-events: none;
}

.player-list {
  flex: 1 1 auto;
  min-height: 0;
  border: 2px solid;
  border-color: #808080 #dfdfdf #dfdfdf #808080;
  background: #fff;
  overflow-y: auto;
}
.player-track {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  border-bottom: 1px solid #eee;
}
.player-track:hover { background: #000080; color: #fff; }
.player-track.active { background: #000080; color: #fff; font-weight: bold; }
.pt-num { color: #888; font-size: 0.78rem; min-width: 20px; }
.player-track:hover .pt-num { color: #cce; }
.player-track.active .pt-num { color: var(--accent); }
.pt-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-eq { color: var(--accent); min-width: 12px; text-align: center; }
.player-empty { padding: 14px; text-align: center; color: #666; font-family: var(--font-mono); font-size: 0.85rem; }

/* ============ START MENU SHUTDOWN ITEM ============ */
.start-shutdown { color: #aa0000; font-weight: bold; }
.start-shutdown:hover { background: #aa0000 !important; color: #fff !important; }

/* ============ GAME FORM (SINGLE-PAGE) ============ */
.game-preview {
  background: #e8f0ff;
  border: 1px solid #000080;
  padding: 6px 10px;
  margin-top: -6px;
  margin-bottom: 10px;
  font-size: 0.86rem;
}
.form-errors {
  display: block;            /* one balloon around the whole message, not per line */
  color: #cc0000;
  font-size: 0.84rem;
  margin-bottom: 8px;
  padding: 6px 10px;
  border: 1px solid #cc0000;
  border-radius: 3px;
  background: #fff0f0;
  line-height: 1.4;
}
/* The email-status area injects the error as an inline <span class="form-errors">;
   force it to render as a single block balloon (not a border per wrapped line). */
span.form-errors { display: block; }

/* ============ SHUTDOWN OVERLAY ============ */
#shutdownOverlay {
  position: fixed; inset: 0;
  background: #000;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
}
.shutdown-screen { text-align: center; color: #fff; width: 340px; }
.shutdown-logo {
  font-family: var(--font-pixel);
  font-size: clamp(0.9rem, 3vw, 1.8rem);
  color: var(--accent);
  margin-bottom: 20px;
  text-shadow: 0 0 14px #ffd70088;
}
.shutdown-msg {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: #aaa;
  min-height: 22px;
  margin-bottom: 14px;
}
.shutdown-bar-wrap {
  width: 100%; height: 16px;
  border: 1px solid #444;
  background: #111;
  overflow: hidden;
}
.shutdown-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #880000, #ff4444);
  transition: width 0.25s ease;
  box-shadow: 0 0 8px #ff000066;
}

/* ============ SHUTDOWN BLOCKED MODAL ============ */
#shutdownBlockedModal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9100;
  display: none;
  align-items: center;
  justify-content: center;
}
.shutdown-modal-win {
  width: 460px;
  max-width: 92vw;
  position: static !important;   /* override .win-window absolute */
  resize: none !important;
}
.shutdown-modal-body {
  background: #fff !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.shutdown-modal-icon { font-size: 2.2rem; text-align: center; margin-bottom: 4px; }
.shutdown-modal-text {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #222;
  text-align: center;
}
.shutdown-modal-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* ============ GAME SEARCH AUTOCOMPLETE ============ */
.ac-dropdown {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: #fff;
  border: 2px solid #000080;
  border-top: none;
  max-height: 220px;
  overflow-y: auto;
  z-index: 2000;
  box-shadow: 2px 2px 0 #000;
}
.ac-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.82rem;
  font-family: var(--font-mono);
  border-bottom: 1px solid #e8e8e8;
  user-select: none;
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.ac-focused { background: #000080; color: #fff; }
.ac-item.ac-loading, .ac-item.ac-noresult { color: #888; cursor: default; font-style: italic; }
.ac-item.ac-loading:hover, .ac-item.ac-noresult:hover { background: #fff; color: #888; }
.ac-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-appid { color: #aaa; font-size: 0.72rem; margin-left: 8px; flex-shrink: 0; }
.ac-item:hover .ac-appid, .ac-item.ac-focused .ac-appid { color: #ccd; }
.ac-url-hint {
  font-size: 0.78rem;
  color: #555;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ac-url-complete {
  background: #fffbcc;
  border: 1px solid #ccc;
  padding: 3px 8px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #000080;
}
.ac-url-complete:hover { background: #fff0aa; }

/* ============ GAME CHIP ============ */
.game-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: #e8f0ff;
  border: 2px solid #000080;
  margin-top: 6px;
  font-family: var(--font-mono);
}
/* ===== Streamer moderation table (DataTables) ===== */
/* Hidden free demo tier: "unlock the full campaign" banner above the streamers
   table / campaign window while the dev hasn't paid. */
.demo-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 8px 10px;
  background: #fffbe6; border: 1px solid var(--accent); border-left: 4px solid var(--accent2);
  font-size: 0.84rem; color: #000080;
}
.demo-banner .win-primary-btn { margin-left: auto; white-space: nowrap; }

/* Lead-magnet banner: shown to logged-out visitors at the top of every
   icon-opened window + the media player, pointing them at the free
   10-creator sample (registers via the Game form / email confirmation). */
.lead-magnet-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 8px 10px;
  background: #fffbe6; border: 1px solid var(--accent); border-left: 4px solid var(--accent2);
  font-size: 0.84rem; color: #000080;
}
.lead-magnet-banner .lead-magnet-btn { margin-left: auto; white-space: nowrap; }
.st-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.st-hide { font-size: 0.82rem; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.st-counts { font-size: 0.82rem; color: #000080; font-weight: bold; margin-left: auto; }
/* Two-tab switcher: Outreach list vs Not contacted */
.st-tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; flex-wrap: wrap;
  border-bottom: 2px solid #808080; }
.st-tab { font: inherit; font-size: 0.82rem; padding: 5px 14px; cursor: pointer; color: #000;
  background: #c0c0c0; border: 2px solid #fff; border-color: #fff #808080 #808080 #fff;
  border-bottom: none; margin-bottom: -2px; }
.st-tab-on { background: #fff; font-weight: bold; border-bottom: 2px solid #fff; }
.st-tab-n { display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 5px;
  background: #000080; color: #fff; border-radius: 8px; font-size: 0.72rem; font-weight: bold; }
.st-tab-hint { font-size: 0.76rem; color: #555; margin-left: 8px; }
/* Star match-rating widget (gold fill clipped over a grey 5-star base) */
.stars { position: relative; display: inline-block; white-space: nowrap; line-height: 1;
  font-size: 0.95rem; letter-spacing: 1px; }
.stars-bg { color: #c9c9c9; }
.stars-fill { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--accent); }
#streamerTable tr.st-overflow td { background: #fbfbf2; }
.st-colbar { display: none; flex-wrap: wrap; align-items: center; gap: 5px;
  margin: 6px 0; padding-top: 6px; border-top: 1px dashed #aaa; width: 100%; }
.st-colbar-label { font-size: 0.78rem; color: #555; margin-right: 2px; }
.st-colbar .st-col-restore { font-size: 0.76rem; padding: 2px 8px; }
.st-addrow { display: flex; align-items: center; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.st-addlabel { font-size: 0.82rem; white-space: nowrap; }
.st-addrow .win-input { flex: 1; min-width: 180px; }
.st-games-less { cursor: pointer; color: #b00; font-weight: bold; text-decoration: none; }
.st-games-less:hover { text-decoration: underline; }
/* ===== Creator-inbox kanban board (winStreamers "Board" view) ===== */
/* List/Board switcher — same Win95 tab look as .st-tabs, above the toolbar */
.st-viewtabs { margin-bottom: 6px; }
.st-board { display: flex; gap: 8px; align-items: flex-start; overflow-x: auto;
  padding: 4px 2px 10px; }
.kb-col { flex: 0 0 176px; width: 176px; background: #bdbdbd;
  border: 2px solid; border-color: #fff #808080 #808080 #fff; }
.kb-col-head { display: flex; align-items: center; gap: 6px; padding: 4px 6px;
  background: var(--win-title-active); color: #fff; cursor: grab;
  font-family: var(--font-mono); font-size: 0.85rem; user-select: none; }
.kb-col-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-col-n { background: #fff; color: #000; padding: 0 5px; font-size: 0.75rem;
  border-radius: 8px; font-weight: bold; }
.kb-col-del { cursor: pointer; padding: 0 2px; }
.kb-col-del:hover { color: var(--accent2); }
.kb-col-cards { min-height: 70px; max-height: 46vh; overflow-y: auto; padding: 6px;
  display: flex; flex-direction: column; gap: 6px; }
.kb-card { background: var(--win-body-bg); border: 2px solid;
  border-color: #fff #808080 #808080 #fff; padding: 5px 6px; cursor: grab; }
.kb-card:active { cursor: grabbing; }
.kb-card-title { font-size: 0.82rem; margin-bottom: 3px; word-break: break-word; }
.kb-card-meta { display: flex; gap: 5px; align-items: center; font-size: 0.76rem; flex-wrap: wrap; }
.kb-badge { background: #fff; border: 1px solid #808080; padding: 0 4px; white-space: nowrap; }
.kb-await { color: var(--accent2); font-weight: bold; }
.kb-reset { cursor: pointer; margin-left: auto; color: #000080; }
.kb-reset:hover { color: var(--accent2); }
.kb-drop { outline: 2px dashed var(--accent); outline-offset: -2px; }
.kb-add-col { flex: 0 0 150px; border: 2px dashed #808080; background: transparent;
  padding: 10px 8px; text-align: center; cursor: pointer; color: #404040;
  font-family: var(--font-mono); font-size: 0.85rem; }
.kb-add-col:hover { border-color: #404040; color: #000; }
.kb-col-input { width: 100%; box-sizing: border-box; font-size: 0.82rem; }
/* ===== Campaign finalize window ===== */
.cg-sec { border: 1px solid #c0c0c0; padding: 10px; margin-bottom: 12px; background: #f8f8f8; }
.cg-modbadge { display: inline-block; padding: 2px 8px; font-size: 0.78rem; border: 1px solid #888; margin-bottom: 6px; }
.cg-mod-approved { background: #d6f5d6; }
.cg-mod-pending  { background: #fff3cd; }
.cg-mod-rejected { background: #ffd6d6; }
.cg-mod-draft    { background: #eee; }
.cg-dates { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0; }
.cg-dates label { display: flex; flex-direction: column; font-size: 0.8rem; gap: 3px; }
.cg-step { font-family: var(--font-mono); width: 100%; margin-bottom: 6px; }
#streamerTable td, #streamerTable th { font-size: 0.8rem; }
#streamerTable .st-games { font-size: 0.74rem; white-space: nowrap; }
#streamerTable tr.st-removed { opacity: 0.5; text-decoration: line-through; }
#streamerTable tr.st-removed a { color: #888; }
.col-hide {
  cursor: pointer; color: #b00; font-weight: bold; margin-left: 4px;
  font-size: 0.78rem; opacity: 0.5;
}
.col-hide:hover { opacity: 1; }
.st-games-more { cursor: pointer; color: #000080; font-weight: bold; text-decoration: none; }
.st-games-more:hover { text-decoration: underline; }

/* ── Outreach status cell + creator conversation ── */
.st-outreach { white-space: nowrap; font-size: 0.74rem; }
.yt-os { color: #444; }
.yt-reply-cta { background: var(--accent); border-color: #fff #b8860b #b8860b #fff; font-weight: bold; }
.yt-reply-cta:hover { background: #ffe34d; }
.yt-hist-btn { padding: 0 5px; font-size: 0.72rem; }
.yt-thread-log {
  border: 2px inset #c0c0c0; background: #fff; padding: 8px;
  min-height: 90px; max-height: 240px; overflow-y: auto; margin-bottom: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.yt-msg { max-width: 82%; padding: 5px 8px; font-size: 0.82rem; line-height: 1.35;
  border: 1px solid #999; word-break: break-word; }
.yt-msg-who { font-size: 0.66rem; opacity: 0.6; margin-bottom: 2px;
  text-transform: uppercase; letter-spacing: 0.5px; }
.yt-msg-in  { align-self: flex-start; background: #f0f0f0; }
.yt-msg-out { align-self: flex-end; background: #d9ead9; }
.yt-routing { background: #fff3cd; border: 1px solid #d4a017; color: #7a5c00;
  padding: 6px 8px; font-size: 0.8rem; margin-bottom: 8px; }
.yt-reply-box { width: 100%; box-sizing: border-box; resize: vertical; font-family: var(--font-mono); }
.yt-reply-box[readonly] { background: #e8e8e8; color: #777; }
.yt-reply-bar { display: flex; align-items: center; gap: 10px; margin-top: 6px; justify-content: flex-end; }
.yt-reply-status { flex: 1; font-size: 0.8rem; }
.yt-counter { font-size: 0.78rem; color: #333; margin: 2px 0 8px; font-family: var(--font-mono); }
.yt-blocked { display: flex; flex-direction: column; gap: 8px; align-items: stretch;
  border: 2px inset #c0c0c0; background: #f4f4f4; padding: 10px; }
.yt-blocked-hint { margin: 0; text-align: center; }
.yt-upgrade-bar { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.yt-upgrade-btn { background: var(--accent); border-color: #fff #b8860b #b8860b #fff; font-weight: bold; }
.yt-upgrade-btn:hover { background: #ffe34d; }
.yt-keyrow { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; flex-wrap: wrap; }
.yt-keycount { font-size: 0.74rem; color: #444; font-family: var(--font-mono); }
/* ── Steam key manager window ── */
.yk-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.yk-counts { font-size: 0.78rem; color: #333; font-family: var(--font-mono); margin-left: auto; }
.yk-addpanel { border: 2px inset #c0c0c0; background: #f4f4f4; padding: 8px; margin-bottom: 8px; }
.yk-addpanel textarea { width: 100%; box-sizing: border-box; resize: vertical; font-family: var(--font-mono); }
/* Key-delivery mode selector */
.yk-mode { border: 1px solid #c0c0c0; background: #f8f8f8; padding: 8px 10px; margin-bottom: 8px; }
.yk-mode-title { font-weight: bold; font-size: 0.82rem; margin-bottom: 6px; }
.yk-mode-opt { display: flex; align-items: flex-start; gap: 7px; padding: 5px 6px; cursor: pointer;
  border: 1px solid transparent; border-radius: 2px; }
.yk-mode-opt:hover { background: #eef3ff; }
.yk-mode-on { background: #e8f0ff; border-color: #809fd0; }
.yk-mode-opt input { margin-top: 3px; }
.yk-mode-dis { opacity: 0.5; cursor: not-allowed; }
.yk-mode-text { display: flex; flex-direction: column; font-size: 0.82rem; line-height: 1.25; }
.yk-mode-hint { font-weight: normal; color: #555; font-size: 0.76rem; }
.yk-mode-note { color: #a05a00; margin-top: 5px; }
.yk-mode-macro { margin-top: 6px; }
/* {key} macro bar in the campaign email editor */
.cg-macrobar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 2px; }
.cg-macrobar .form-hint { margin: 0; }
/* Live char counter under each message-chain textarea (e.g. "124/2000") */
.cg-charcount { text-align: right; font-size: 0.74rem; color: #666;
  margin: 1px 0 6px; font-family: var(--font-mono); }
.cg-charcount-max { color: #c0392b; font-weight: bold; }
/* Read-only preview of the opt-out footer auto-appended to every campaign message */
.cg-optout-note { margin: 2px 0 8px; }
.cg-optout-preview { background: #eee; border: 1px solid #999; border-radius: 2px;
  padding: 5px 8px; font-size: 0.8rem; color: #555; font-family: var(--font-mono);
  white-space: pre-line; }
/* Generic amber warning box (reused for the no-links hint, repeat warning, schedule lock) */
.cg-warnbox { color: #a05a00; background: #fff6e6; border: 1px solid #e0b878;
  padding: 6px 8px; margin-bottom: 8px; border-radius: 2px; }
/* Post-payment setup wizard (installer fork: date → what creators get → auto/custom) */
.cg-wiz-step { font-weight: bold; font-size: 0.9rem; margin: 12px 0 4px; }
.cg-wiz-rec { background: var(--accent); color: #000; font-size: 0.68rem;
  padding: 0 5px; margin-left: 6px; border: 1px solid #806a00; border-radius: 2px;
  text-transform: uppercase; vertical-align: middle; }
.cg-wiz-fork { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.cg-wiz-choice { flex: 1 1 220px; border: 2px solid #a0a0a0; padding: 10px;
  background: #f4f4f4; border-radius: 2px; }
.cg-wiz-choice-auto { border-color: var(--win-title-active); background: #eef3ff; }
.cg-wiz-choice .form-hint { margin-top: 6px; }
.cg-wiz-keysbtn { margin-top: 4px; align-self: flex-start; font-size: 0.78rem; }
.cg-wiz-comps { display: inline-block; margin-top: 8px; font-size: 0.8rem; }
/* Autopilot-armed status panel (setup_mode='auto', pre-confirm) */
.cg-autopanel { border: 2px solid var(--green); background: #eefbf2; }
/* First-message link/image block + suggested rewrite */
.cg-linkalert { border: 2px solid #c0392b; background: #fdecea; padding: 8px 10px;
  margin: 6px 0 8px; border-radius: 2px; }
.cg-linkalert-title { font-weight: bold; color: #c0392b; margin-bottom: 4px; }
.cg-linkalert-msg { font-size: 0.86rem; margin-bottom: 6px; }
.cg-linkalert-sub { font-weight: bold; font-size: 0.82rem; margin: 6px 0 3px; }
.cg-linkalert-rewrite { background: #fff; border: 1px solid #c8a000; padding: 6px 8px;
  font-family: var(--font-mono); font-size: 0.82rem; white-space: normal; max-height: 220px;
  overflow: auto; margin-bottom: 6px; }
.cg-linkalert-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Message preview panel */
.cg-prev { border: 1px solid #808080; background: #fff; padding: 0 0 8px; margin: 4px 0 8px; }
.cg-prev-head { display: flex; align-items: center; justify-content: space-between;
  background: var(--win-title-active); color: #fff; font-weight: bold; padding: 4px 8px; }
.cg-prev-close { padding: 0 7px; }
.cg-prev-caption { margin: 6px 8px; }
.cg-prev-subject { padding: 6px 10px; border-bottom: 1px solid #ddd; font-size: 0.85rem; }
.cg-prev-step { padding: 8px 10px; border-bottom: 1px dashed #ddd; }
.cg-prev-steplabel { font-size: 0.72rem; color: #888; text-transform: uppercase; margin-bottom: 3px; }
.cg-prev-body { font-size: 0.88rem; line-height: 1.45; white-space: normal; word-break: break-word; }
/* LLM first-message drafts (release+key / demo) */
.cg-draft-sec { margin-bottom: 10px; }
.cg-draft-card { border: 1px solid #808080; background: #fff; padding: 8px 10px;
  margin: 8px 0; }
.cg-draft-title { font-weight: bold; font-size: 0.86rem; margin-bottom: 4px; }
.cg-draft-body { font-size: 0.84rem; line-height: 1.4; white-space: normal;
  word-break: break-word; background: #f8f8f8; border: 1px solid #ddd;
  padding: 6px 8px; margin: 4px 0 8px; }
/* Drafted follow-up nudges shown under each first-message draft */
.cg-draft-fups { margin: 0 0 8px; }
.cg-draft-fup { font-size: 0.8rem; line-height: 1.4; white-space: normal;
  word-break: break-word; background: #f8f8f8; border: 1px dashed #ccc;
  padding: 5px 8px; margin: 4px 0 4px 14px; }
.cg-draft-fup-n { font-size: 0.7rem; color: #888; text-transform: uppercase; }
/* Step funnel (selected → contacted → replied → interested) */
.cg-funnel { background: #f4f4ff; border: 1px solid #9aa0c8; }
.cg-fun-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.cg-fun-label { flex: 0 0 42%; font-size: 0.82rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.cg-fun-bar { flex: 1; height: 14px; background: #fff; border: 1px solid #808080;
  box-shadow: inset 1px 1px 0 #dfdfdf; overflow: hidden; }
.cg-fun-fill { display: block; height: 100%; background: var(--win-title-active); }
.cg-fun-n { flex: 0 0 34px; text-align: right; font-weight: bold; font-size: 0.85rem; }
/* Runtime key-shortage banner (mailing paused, pool ran out mid-campaign) */
.cg-shortage-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cg-shortage-banner .win-gray-btn { margin-left: auto; white-space: nowrap; }
/* Campaign-delivered / repeat panel */
.cg-done { background: #eaf7ea; border: 1px solid #7bbf7b; }
.cg-done-title { font-weight: bold; font-size: 1.05rem; color: #1d6b1d; margin-bottom: 4px; }
.cg-done-msg { font-size: 0.9rem; margin-bottom: 6px; }
.cg-done-hint { margin-bottom: 10px; line-height: 1.5; }
.cg-repeat-confirm { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #7bbf7b; }
.cg-repeat-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.cg-refund { background: #fdf0f0; border: 1px solid #d99; }
.cg-refund-legal { color: #8a3030; line-height: 1.5; margin-bottom: 8px; }
/* Schedule hints: Steam fests + no-demo warning */
.cg-hints { margin: 6px 0 10px; }
.cg-demo-warn { color: #a05a00; background: #fff6e6; border: 1px solid #e0b878;
  padding: 6px 8px; margin-bottom: 8px; border-radius: 2px; font-size: 0.84rem; }
.cg-fests { border: 1px solid #c0c0c0; background: #fafafa; padding: 6px 8px; }
.cg-fests-title { font-weight: bold; font-size: 0.84rem; margin-bottom: 2px; }
.cg-fest { display: flex; gap: 10px; align-items: baseline; padding: 2px 0; font-size: 0.82rem; }
.cg-fest-dates { font-family: var(--font-mono); color: #444; min-width: 110px; white-space: nowrap; }
.cg-fest-nf { font-weight: bold; color: #000080; }
.yk-add-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; justify-content: flex-end; }
#ykTable { border-collapse: collapse; font-size: 0.82rem; }
#ykTable th { background: var(--win-title-active); color: #fff; padding: 5px 8px; text-align: left; }
#ykTable td { border: 1px solid #ddd; padding: 4px 8px; background: #fff; }
#ykTable .yk-code { font-family: var(--font-mono); font-size: 0.8rem; }
.yk-badge { padding: 1px 7px; border: 1px solid #999; font-size: 0.74rem; white-space: nowrap; }
.yk-st-avail { background: #d9ead9; }
.yk-st-resv  { background: #fff3cd; }
.yk-st-sent  { background: #d9e4ff; }
.gc-name { flex: 1; overflow: hidden; }
.gc-link {
  color: #000080;
  font-weight: bold;
  font-size: 0.85rem;
  text-decoration: none;
}
.gc-link:hover { text-decoration: underline; }
.gc-appid { color: #888; font-size: 0.74rem; margin-left: 6px; }
.gc-btn {
  background: #c0c0c0;
  border: 1px outset #808080;
  padding: 2px 8px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  flex-shrink: 0;
}
.gc-btn:hover { background: #a0a0ff; }
.gc-del:hover { background: #ff8080; }

/* ============ EMAIL STATUS ============ */
.email-status-sent { color: var(--green); font-size: 0.84rem; }
.email-status-wait { color: var(--accent2); font-size: 0.84rem; }
.email-no-email-warn {
  display: block;
  background: #fff3cd;
  border: 1px solid #ffc107;
  padding: 8px 12px;
  font-size: 0.80rem;
  line-height: 1.45;
}

/* ============ MAINTENANCE SCREEN ============ */
.maintenance-notice {
  font-family: var(--font-pixel);
  font-size: clamp(0.6rem, 2.5vw, 1.1rem);
  color: var(--accent2);
  text-align: center;
  margin-top: 32px;
  line-height: 1.8;
  text-shadow: 0 0 16px #ff6b3588;
  animation: blink 2s step-end infinite;
}
.maintenance-notice small {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: #888;
  display: block;
  margin-top: 8px;
  animation: none;
}

/* ============ STRIP AUTH (top-right corner) ============ */
#stripAuthArea {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
.strip-auth-btn {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 2px 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  cursor: pointer;
  color: #ccc;
  height: 20px;
  line-height: 1;
  letter-spacing: 0.02em;
  transition: background 0.15s, color 0.15s;
}
.strip-auth-btn:hover {
  background: rgba(255,255,255,0.22);
  color: #fff;
}
.strip-auth-btn-primary {
  background: rgba(0,0,128,0.5);
  border-color: rgba(100,100,255,0.5);
  color: #aaf;
}
.strip-auth-btn-primary:hover {
  background: rgba(0,0,200,0.7);
  color: #fff;
}
.strip-auth-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: #7a7aaa;
  font-size: 0.70rem;
  padding: 2px 6px;
}
.strip-auth-btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  color: #ccc;
  border-color: rgba(255,255,255,0.2);
}
.auth-back-link {
  font-size: 0.78rem;
  color: #000080;
  cursor: pointer;
  text-decoration: underline;
  white-space: nowrap;
}
.auth-back-link:hover { color: #0000cc; }
.strip-auth-user {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #8ef;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px;
}

/* ─── LEGAL PAGES ───────────────────────────────────── */
.legal-body {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.5;
  color: #111;
  max-height: 70vh;
  overflow-y: auto;
}
.legal-body .legal-updated {
  font-style: italic;
  opacity: 0.7;
  margin: 0 0 12px;
}
.legal-body h2 {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: #000080;
  border-bottom: 1px solid #808080;
  padding-bottom: 2px;
  margin: 18px 0 6px;
}
.legal-body p { margin: 6px 0; }
.legal-body ul { margin: 6px 0; padding-left: 22px; }
.legal-body li { margin: 4px 0; }
.legal-body a {
  color: #000080;
  text-decoration: underline;
  cursor: pointer;
}
.legal-body a:hover { color: #0000cc; }
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 0.78rem;
}
.legal-table th,
.legal-table td {
  border: 1px solid #808080;
  padding: 4px 6px;
  text-align: left;
  vertical-align: top;
}
.legal-table th { background: #000080; color: #fff; }
.legal-table tr:nth-child(even) td { background: #e8e8e8; }

/* ─── CONSENT CHECKBOX ──────────────────────────────── */
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.4;
  color: #111;
  cursor: pointer;
}
.consent-row input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.consent-row a {
  color: #000080;
  text-decoration: underline;
  cursor: pointer;
}
.consent-row a:hover { color: #0000cc; }

/* ─── COOKIE BANNER ─────────────────────────────────── */
#cookieBanner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--taskbar-h);
  z-index: 99999;
  background: var(--win-body-bg);
  border-top: 2px solid #fff;
  box-shadow: 0 -2px 0 #808080, 0 -4px 10px rgba(0,0,0,0.4);
  padding: 10px 14px;
}
.cookie-banner-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
}
.cookie-banner-text {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.4;
  color: #111;
  flex: 1;
}
.cookie-banner-text a {
  color: #000080;
  text-decoration: underline;
  cursor: pointer;
}
.cookie-banner-text a:hover { color: #0000cc; }
.cookie-banner-inner .win-primary-btn { white-space: nowrap; }
@media (max-width: 600px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; }
  .cookie-banner-inner .win-primary-btn { width: 100%; }
}

/* ============ MY GAMES ============ */
.mg-list { display: flex; flex-direction: column; gap: 6px; }
.mg-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border: 2px solid #c0c0c0; background: #f8f8f8;
  font-family: var(--font-mono); font-size: 0.88rem;
}
.mg-row-active { border-color: #000080; background: #e8f0ff; }
.mg-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.mg-name a { color: #000080; text-decoration: none; }
.mg-name a:hover { text-decoration: underline; }
.mg-act { flex-shrink: 0; }
.mg-active { color: #000080; font-weight: bold; white-space: nowrap; }
.mg-badge {
  font-size: 0.72rem; padding: 1px 6px; border: 1px solid #888; white-space: nowrap;
}
.mg-badge.mg-paid { background: var(--green); color: #003a14; border-color: #00913a; }
.mg-badge.mg-demo { background: #ffe7a8; color: #6b4e00; border-color: #d9b84a; }
@media (max-width: 600px) {
  .mg-row { flex-direction: column; align-items: stretch; }
  .mg-act .win-gray-btn, .mg-act .win-primary-btn { width: 100%; }
}