/* World view themes — three states driven by html[data-game-view]:
(unset / "base") → original amber palette, hub sidebar
"minecraft" → deep grass-green accents, MC sidebar
"vintage-story" → dark rustic umber accents, VS sidebar
The anti-flash inline script in sets the html attribute before
the stylesheet renders, so there is never a colour flash on hard reload. */
/* ═══════════════════════════════════════════════════════════════
COLOUR TOKEN OVERRIDES
═══════════════════════════════════════════════════════════════ */
html[data-game-view="minecraft"] {
--color-amber: #5A8C3A;
--color-sunflower: #6DA847;
--color-amber-05: rgba(90, 140, 58, 0.05);
--color-amber-08: rgba(90, 140, 58, 0.08);
--color-amber-10: rgba(90, 140, 58, 0.10);
--color-amber-20: rgba(90, 140, 58, 0.20);
--color-amber-30: rgba(90, 140, 58, 0.30);
--border-amber: rgba(90, 140, 58, 0.35);
--focus-ring: 0 0 0 2px var(--color-soil), 0 0 0 4px #5A8C3A;
}
html[data-game-view="vintage-story"] {
--color-amber: #8B4513;
--color-sunflower: #A35626;
--color-amber-05: rgba(139, 69, 19, 0.05);
--color-amber-08: rgba(139, 69, 19, 0.08);
--color-amber-10: rgba(139, 69, 19, 0.10);
--color-amber-20: rgba(139, 69, 19, 0.20);
--color-amber-30: rgba(139, 69, 19, 0.30);
--border-amber: rgba(139, 69, 19, 0.35);
--focus-ring: 0 0 0 2px var(--color-soil), 0 0 0 4px #8B4513;
--surface-0: #130E09;
--surface-1: #1C1410;
--surface-2: #261C13;
--surface-3: #312317;
--surface-inset: #0F0A06;
}
/* ═══════════════════════════════════════════════════════════════
TOPBAR — coloured world-context line + badge pill
═══════════════════════════════════════════════════════════════ */
/* 2-px accent strip at the bottom of the topbar */
.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: 1;
}
html[data-game-view="minecraft"] .topbar::after {
background: linear-gradient(90deg,
transparent 0%,
rgba(90, 140, 58, 0.6) 30%,
rgba(90, 140, 58, 0.6) 70%,
transparent 100%);
}
html[data-game-view="vintage-story"] .topbar::after {
background: linear-gradient(90deg,
transparent 0%,
rgba(139, 69, 19, 0.6) 30%,
rgba(139, 69, 19, 0.6) 70%,
transparent 100%);
}
/* World badge pill in the topbar — hidden by default, shown per world */
.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);
flex-shrink: 0;
white-space: nowrap;
}
html[data-game-view="minecraft"] .topbar__world-badge--mc {
display: flex;
border: 1px solid rgba(90, 140, 58, 0.40);
background-color: rgba(90, 140, 58, 0.08);
color: #5A8C3A;
}
html[data-game-view="vintage-story"] .topbar__world-badge--vs {
display: flex;
border: 1px solid rgba(139, 69, 19, 0.40);
background-color: rgba(139, 69, 19, 0.08);
color: #8B4513;
}
html[data-game-view="minecraft"] .topbar__world-badge--mc:hover {
background-color: rgba(90, 140, 58, 0.14);
}
html[data-game-view="vintage-story"] .topbar__world-badge--vs:hover {
background-color: rgba(139, 69, 19, 0.14);
}
/* ═══════════════════════════════════════════════════════════════
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;
}
/* Hide the hub world-chooser when a world is active */
html[data-game-view="minecraft"] .sidebar__hub,
html[data-game-view="vintage-story"] .sidebar__hub { display: none; }
/* World chooser cards */
.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);
text-align: left;
font-family: var(--font-body);
}
.sidebar__world-card:hover { transform: translateX(3px); }
.sidebar__world-card--mc:hover {
background-color: rgba(90, 140, 58, 0.10);
border-color: rgba(90, 140, 58, 0.40);
}
.sidebar__world-card--vs:hover {
background-color: rgba(139, 69, 19, 0.10);
border-color: rgba(139, 69, 19, 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(90, 140, 58, 0.15);
color: #5A8C3A;
}
.sidebar__world-card--vs .sidebar__world-card__icon {
background-color: rgba(139, 69, 19, 0.15);
color: #8B4513;
}
.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; }
/* "← Hub" back button */
.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 badge */
.sidebar__world-name-badge {
flex: 1;
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;
min-width: 0;
}
.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;
}
/* 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;
}
.sidebar__world-name-badge span {
overflow: hidden;
text-overflow: ellipsis;
}
/* Thin separator between world nav and shared nav */
.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; }