/**
 * UI Improvements Integration Styles
 * Ensures all systems work together harmoniously
 */

/* Screen Reader Only */
.sr-only {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;

/* Ensure consistent z-index layering */
.tour-overlay {
    z-index: 9997;

.tour-highlight {
    z-index: 9998;

.tour-popup {
    z-index: 9999;

.toast-container {
    z-index: 10000;

.confirmation-overlay {
    z-index: 20000;

/* Mobile Touch Targets */
@media (hover: none) and (pointer: coarse) {
    [data-tooltip],
    .breadcrumb-link,
    .back-button,
    .view-mode-btn,
    .state-btn,
    .tour-btn {
        min-height: calc(var(--spacing-2xl) * 1.375);
        min-width: calc(var(--spacing-2xl) * 1.375);

/* Ensure proper stacking context */
.gm-tools-panel,
.game-state-panel,
.tour-popup,
.confirmation-dialog {
    isolation: isolate;

/* Smooth transitions between states */
.warden-section,
.info-card,
.gm-tool-card {
    transition: all 0.2s ease;

/* Focus visible improvements */
*:focus-visible {
    outline: 2px solid var(--color-info, #4a90e2);
    outline-offset: 2px;
    border-radius: var(--radius-sm, calc(var(--radius-sm) * 0.75));

/* Print styles - hide UI improvements */
@media print {
    .breadcrumb-navigation,
    .tour-overlay,
    .toast-container,
    .confirmation-overlay,
    .gm-tools-panel,
    .game-state-panel,
    .view-mode-controls {
        display: none !important;

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;

/* High contrast mode support */
@media (prefers-contrast: high) {
    .toast,
    .confirmation-dialog,
    .tour-popup {
        border-width: calc(var(--spacing-xs) * 0.75);

    .info-card,
    .gm-tool-card {
        border-width: calc(var(--spacing-xs) / 2);

/* Dark mode consistency */
@media (prefers-color-scheme: dark) {
    .toast,
    .confirmation-dialog,
    .tour-popup,
    .gm-tools-panel,
    .game-state-panel {
        background: rgba(20, 20, 30, 0.98);
        color: var(--color-text-primary);

/* Light mode support (if needed) */
@media (prefers-color-scheme: light) {
    .toast,
    .confirmation-dialog,
    .tour-popup,
    .gm-tools-panel,
    .game-state-panel {
        background: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.98);
        color: #000;

}}}}}}}}}}}}}}}}}}}}}}