/* World view themes — three states driven by html[data-game-view]:
     (unset / "base")  → amber accent, hub sidebar visible
     "minecraft"        → forest-green accent (seaglass axis), MC sidebar
     "vintage-story"    → dark brown accent (amber axis), VS sidebar

   Palette is LOCKED: every hue used here belongs to one of the three
   locked accent axes (amber, seaglass, wine). Worlds differentiate by
   promoting one axis and shading it for character:
     · Shared      → amber #D69730 (locked bright gold)
     · Minecraft   → seaglass shifted greener #4E8F5A (locked axis, +yellow)
     · Vintage Story → amber shaded down to brown #8B5E1B (locked axis, deep shade — same latitude as --color-honey)
   Wine is reserved for destructive/danger states site-wide, per tokens.css.
   No fourth hue exists anywhere. Surface family stays identical across
   worlds so no world introduces a competing palette. */

/* ═══════════════════════════════════════════════════════════════
   COLOUR TOKEN OVERRIDES — accent axis only, no new hues
   ═══════════════════════════════════════════════════════════════ */

html[data-game-view="minecraft"] {
  --color-accent:       #4E8F5A;
  --color-accent-hover: #3E7548;
  --color-amber:        #4E8F5A;
  --color-sunflower:    #4E8F5A;
  --color-accent-05:  rgba(78, 143, 90, 0.05);
  --color-accent-08:  rgba(78, 143, 90, 0.08);
  --color-accent-10:  rgba(78, 143, 90, 0.10);
  --color-accent-20:  rgba(78, 143, 90, 0.20);
  --color-accent-30:  rgba(78, 143, 90, 0.30);
  --color-amber-05:  rgba(78, 143, 90, 0.05);
  --color-amber-08:  rgba(78, 143, 90, 0.08);
  --color-amber-10:  rgba(78, 143, 90, 0.10);
  --color-amber-20:  rgba(78, 143, 90, 0.20);
  --color-amber-30:  rgba(78, 143, 90, 0.30);
  --border-accent:    rgba(78, 143, 90, 0.35);
  --border-amber:     rgba(78, 143, 90, 0.35);
  --focus-ring:       0 0 0 2px var(--surface-0), 0 0 0 4px #4E8F5A;
}

html[data-game-view="vintage-story"] {
  --color-accent:       #8B5E1B;
  --color-accent-hover: #6E4713;
  --color-amber:        #8B5E1B;
  --color-sunflower:    #8B5E1B;
  --color-accent-05:  rgba(139, 94, 27, 0.05);
  --color-accent-08:  rgba(139, 94, 27, 0.08);
  --color-accent-10:  rgba(139, 94, 27, 0.10);
  --color-accent-20:  rgba(139, 94, 27, 0.20);
  --color-accent-30:  rgba(139, 94, 27, 0.30);
  --color-amber-05:  rgba(139, 94, 27, 0.05);
  --color-amber-08:  rgba(139, 94, 27, 0.08);
  --color-amber-10:  rgba(139, 94, 27, 0.10);
  --color-amber-20:  rgba(139, 94, 27, 0.20);
  --color-amber-30:  rgba(139, 94, 27, 0.30);
  --border-accent:    rgba(139, 94, 27, 0.35);
  --border-amber:     rgba(139, 94, 27, 0.35);
  --focus-ring:       0 0 0 2px var(--surface-0), 0 0 0 4px #8B5E1B;
  /* Base-3 (--base-3) is the warmer of the three ground tones and reads
     as the rustic "wood-panelled workshop" the VS world lives inside; use
     it as the world's surface floor rather than duplicating base. */
  --surface-0:       #180F06;
  --surface-1:       var(--base-3);
  --surface-2:       #2A2015;
  --surface-3:       #322618;
  --surface-inset:   #100A05;
}

/* ═══════════════════════════════════════════════════════════════
   TOPBAR — coloured world-context line + badge pill
   ═══════════════════════════════════════════════════════════════ */

.topbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  transition: background var(--transition-slow);
  pointer-events: none;
  z-index: var(--z-raised);
}

html[data-game-view="minecraft"] .topbar::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(78, 143, 90, 0.60) 30%,
    rgba(78, 143, 90, 0.60) 70%,
    transparent 100%);
}

html[data-game-view="vintage-story"] .topbar::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(139, 94, 27, 0.60) 30%,
    rgba(139, 94, 27, 0.60) 70%,
    transparent 100%);
}

.topbar__world-badge {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  cursor: pointer;
  background: none;
  border: none;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  flex-shrink: 0;
  white-space: nowrap;
}
.topbar__world-badge:hover  { transform: translateY(-1px); }
.topbar__world-badge:active { transform: translateY(0); }

html[data-game-view="minecraft"] .topbar__world-badge--mc {
  display: flex;
  border: 1px solid rgba(78, 143, 90, 0.40);
  background-color: rgba(78, 143, 90, 0.08);
  color: #4E8F5A;
}

html[data-game-view="vintage-story"] .topbar__world-badge--vs {
  display: flex;
  border: 1px solid rgba(139, 94, 27, 0.40);
  background-color: rgba(139, 94, 27, 0.08);
  color: #B7852C;   /* lighter tint of the VS brown so the label passes AA on dark chrome */
}

html[data-game-view="minecraft"] .topbar__world-badge--mc:hover {
  background-color: rgba(78, 143, 90, 0.14);
}

html[data-game-view="vintage-story"] .topbar__world-badge--vs:hover {
  background-color: rgba(139, 94, 27, 0.18);
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — hub panel (world chooser shown in base state)
   ═══════════════════════════════════════════════════════════════ */

.sidebar__hub {
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-1);
}

.sidebar__hub-label {
  font-size: 10px;
  color: var(--color-ash);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: 600;
  padding: 0 var(--space-3) var(--space-2);
  display: block;
}

html[data-game-view="minecraft"]     .sidebar__hub,
html[data-game-view="vintage-story"] .sidebar__hub { display: none; }

.sidebar__world-cards {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sidebar__world-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background-color: var(--surface-1);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  text-align: left;
  font-family: var(--font-body);
}

.sidebar__world-card:hover  { transform: translateX(3px); box-shadow: var(--shadow-sm); }
.sidebar__world-card:active { transform: translateX(1px); box-shadow: none; }

.sidebar__world-card--mc:hover {
  background-color: rgba(78, 143, 90, 0.10);
  border-color: rgba(78, 143, 90, 0.40);
}

.sidebar__world-card--vs:hover {
  background-color: rgba(139, 94, 27, 0.10);
  border-color: rgba(139, 94, 27, 0.40);
}

.sidebar__world-card__icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar__world-card--mc .sidebar__world-card__icon {
  background-color: rgba(78, 143, 90, 0.15);
  color: #4E8F5A;
}

.sidebar__world-card--vs .sidebar__world-card__icon {
  background-color: rgba(139, 94, 27, 0.18);
  color: #B7852C;
}

.sidebar__world-card__body { flex: 1; min-width: 0; }

.sidebar__world-card__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-parchment);
  display: block;
}

.sidebar__world-card__hint {
  font-size: 11px;
  color: var(--color-ash);
  display: block;
  margin-top: 1px;
}

.sidebar__world-card__arrow {
  color: var(--color-ash);
  opacity: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  flex-shrink: 0;
}

.sidebar__world-card:hover .sidebar__world-card__arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — world context header (shown when MC or VS is active)
   ═══════════════════════════════════════════════════════════════ */

.sidebar__world-ctx {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-1);
}

html[data-game-view="minecraft"]     .sidebar__world-ctx,
html[data-game-view="vintage-story"] .sidebar__world-ctx { display: flex; }

.sidebar__world-back {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-ash);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

.sidebar__world-back:hover {
  color: var(--color-parchment);
  background-color: var(--color-white-05);
}

/* World name badges — only the correct one shows */
.sidebar__world-name-badge { display: none; }

html[data-game-view="minecraft"]     .sidebar__world-name-badge--mc,
html[data-game-view="vintage-story"] .sidebar__world-name-badge--vs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px var(--space-3);
  background-color: var(--color-amber-10);
  border: 1px solid var(--border-amber);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-amber);
  overflow: hidden;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

html[data-game-view="vintage-story"] .sidebar__world-name-badge--vs {
  /* VS accent brown is dark; the badge label needs a lighter tint of the
     same shade to stay readable on the dark ground. */
  color: #B7852C;
}

.sidebar__world-name-badge span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — world-specific nav sections (collapse/expand)
   ═══════════════════════════════════════════════════════════════ */

.sidebar__world-nav {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height var(--transition-slow),
    opacity var(--transition-base);
  pointer-events: none;
}

html[data-game-view="minecraft"]     .sidebar__world-nav--mc,
html[data-game-view="vintage-story"] .sidebar__world-nav--vs {
  max-height: 500px;
  opacity: 1;
  pointer-events: auto;
}

html[data-game-view="minecraft"]     .sidebar__world-nav--vs,
html[data-game-view="vintage-story"] .sidebar__world-nav--mc {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.sidebar__section-sep {
  height: 1px;
  background-color: var(--border-subtle);
  margin: var(--space-2) var(--space-3);
}

/* Remove old world-toggle pill (replaced by sidebar cards) */
.world-toggle { display: none !important; }