/* Winston V3 — mode badge. Two states: practice money / real money.
   Always visible in the top bar. In real mode this is the highest-priority
   element by visual weight. */

.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--type-sm);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-snug);
  border: 1px solid;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out);
  white-space: nowrap;
}

/* Long/short label swap — long for desktop, short for narrow viewports
   so "Practice money" doesn't wrap and break the top-bar row. */
.mode-badge .mode-badge-short { display: none; }
@media (max-width: 540px) {
  .mode-badge .mode-badge-long  { display: none; }
  .mode-badge .mode-badge-short { display: inline; }
  .mode-badge { padding: 0 var(--space-2); }
}

.mode-badge[data-mode="paper"] {
  background: var(--mode-paper-soft);
  color: var(--mode-paper);
  border-color: var(--mode-paper-line);
}
.mode-badge[data-mode="paper"]:hover { background: color-mix(in srgb, var(--mode-paper-soft) 80%, var(--mode-paper) 6%); }

.mode-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}