/* ============================================================================= Kingdom of Valor — Theme System Applied via data-theme="simplified" or data-theme="heavy" on . Default (no attribute) = heavy theme. ============================================================================= */ /* ============================================================================ HEAVY THEME — full graphics (default, no special rules needed) Images load normally, village map shows sprites. ============================================================================= */ /* ============================================================================ SIMPLIFIED THEME — no images, everything is text/card based ============================================================================= */ /* --- Resource bar: hide image icons, show emoji fallbacks ------------------ */ [data-theme="simplified"] .resource-pill__icon { display: none; } [data-theme="simplified"] .resource-pill[data-res="gold"]::before { content: ''; } [data-theme="simplified"] .resource-pill[data-res="food"]::before { content: ''; } [data-theme="simplified"] .resource-pill[data-res="wood"]::before { content: ''; } /* --- Bottom nav: hide image icons, show emoji fallbacks ------------------- */ [data-theme="simplified"] .bottom-nav__icon { display: none; } [data-theme="simplified"] .bottom-nav__item[data-page="attack"]::before { content: ''; } [data-theme="simplified"] .bottom-nav__item[data-page="army"]::before { content: ''; } [data-theme="simplified"] .bottom-nav__item[data-page="village"]::before { content: ''; } [data-theme="simplified"] .bottom-nav__item[data-page="mailbox"]::before { content: ''; } /* --- Village map: hide terrain/wall images, show card grid instead -------- */ [data-theme="simplified"] .village-terrain, [data-theme="simplified"] .village-wall { display: none; } [data-theme="simplified"] .village-map-wrap { aspect-ratio: unset; height: auto; max-width: 680px; background: var(--bg-dark); border: 1px solid var(--border-dark); border-radius: var(--radius-lg); padding: var(--space-4); } /* Hide all positioned building sprites */ [data-theme="simplified"] .building { display: none; } /* Show the simplified grid instead */ [data-theme="simplified"] .simplified-village-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3); } .simplified-village-grid { display: none; /* hidden in heavy theme */ } /* Individual building card in simplified theme */ .simplified-building-card { background: var(--bg-mid); border: 1px solid var(--border-dark); border-radius: var(--radius-md); padding: var(--space-3); cursor: pointer; transition: border-color var(--trans-fast), background var(--trans-fast); display: flex; flex-direction: column; gap: var(--space-2); min-height: 80px; justify-content: space-between; } .simplified-building-card:hover { border-color: var(--gold-border); background: var(--bg-raised); } .simplified-building-card.is-unbuilt { opacity: 0.45; border-style: dashed; } .simplified-building-card.is-unbuilt:hover { opacity: 0.65; } .simplified-building-card.is-upgrading { border-color: var(--gold-border); animation: upgrade-pulse 2s ease-in-out infinite; } .sbc-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .sbc-icon { font-size: 1.375rem; line-height: 1; flex-shrink: 0; } .sbc-level { font-size: 0.6875rem; font-weight: 700; font-family: var(--font-display); color: var(--gold); background: var(--gold-faint); border: 1px solid var(--gold-border); border-radius: var(--radius-sm); padding: 1px 5px; } .sbc-level.unbuilt { color: var(--text-muted); background: transparent; border-color: var(--border-dark); } .sbc-name { font-size: 0.75rem; font-weight: 600; color: var(--text-primary); font-family: var(--font-display); line-height: 1.3; } .sbc-stat { font-size: 0.6875rem; color: var(--text-secondary); } .sbc-upgrade-bar { height: 3px; background: var(--bg-void); border-radius: 99px; overflow: hidden; margin-top: 2px; } .sbc-upgrade-fill { height: 100%; background: var(--gold); border-radius: 99px; transition: width 1s linear; } /* --- Troop cards in simplified theme: no art image ----------------------- */ [data-theme="simplified"] .troop-card__art-wrap { display: none; } [data-theme="simplified"] .troop-card { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-2); min-height: unset; } [data-theme="simplified"] .troop-card__info { flex: 1; } [data-theme="simplified"] .troop-card__controls { flex-shrink: 0; } /* --- Battle crest: hide image, show emoji --------------------------------- */ [data-theme="simplified"] .battle-crest { display: none; } /* --- Battle atmosphere: hide in simplified -------------------------------- */ [data-theme="simplified"] .battle-atmosphere { display: none; } /* --- Building detail modal: hide art image in simplified, show emoji instead --- */ [data-theme="simplified"] .building-detail__art-wrap { background: var(--bg-mid); display: flex; align-items: center; justify-content: center; } [data-theme="simplified"] .building-detail__art { display: none; } [data-theme="simplified"] .building-detail__art-wrap::after { font-size: 3.5rem; /* Icon set via JS using data-building-key on the wrap */ content: attr(data-icon); } .theme-toggle-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-mid); background: var(--bg-mid); color: var(--text-secondary); font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all var(--trans-fast); white-space: nowrap; } .theme-toggle-btn:hover { border-color: var(--gold-border); color: var(--gold); background: var(--gold-faint); } .theme-toggle-btn .toggle-icon { font-size: 0.9375rem; }