.game-selector-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: var(--space-4); z-index: 100; opacity: 0; visibility: hidden; transition: opacity var(--duration-normal) var(--ease-out), visibility var(--duration-normal) var(--ease-out); } .game-selector-overlay.is-visible { opacity: 1; visibility: visible; } .game-selector-container { width: 100%; max-width: 480px; max-height: 90%; background: var(--color-surface); border-radius: var(--radius-xl); border: 1px solid var(--color-border); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; overflow: hidden; transform: scale(0.95) translateY(10px); transition: transform var(--duration-normal) var(--ease-spring); } .game-selector-overlay.is-visible .game-selector-container { transform: scale(1) translateY(0); } .game-selector-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--color-border); } .game-selector-title { font-size: 1.125rem; font-weight: 600; color: var(--color-text); margin: 0; } .game-selector-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: var(--radius-md); color: var(--color-text-muted); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .game-selector-close:hover { background: var(--color-bg); color: var(--color-text); } .game-selector-close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .game-selector-close svg { width: 20px; height: 20px; } .game-selector-grid { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .game-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--color-bg); border: 2px solid transparent; border-radius: var(--radius-lg); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring); text-align: left; width: 100%; } .game-card:hover { background: var(--color-surface); border-color: var(--color-border); } .game-card:active { transform: scale(0.98); } .game-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .game-card.is-selected { border-color: var(--game-color, var(--color-primary)); background: var(--color-surface); } .game-card.is-pending { border-color: var(--color-warning); animation: pendingPulse 1.5s ease-in-out infinite; } @keyframes pendingPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .game-card.is-requested { border-color: var(--color-success); background: rgba(34, 197, 94, 0.1); animation: requestedGlow 1s ease-in-out infinite alternate; } @keyframes requestedGlow { from { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); } to { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } } .game-card-icon { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--color-surface); border-radius: var(--radius-md); color: var(--game-color, var(--color-text)); transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring); } .game-card:hover .game-card-icon { transform: scale(1.05); } .game-card.is-selected .game-card-icon { background: var(--game-color, var(--color-primary)); color: white; } .game-card-icon svg { width: 24px; height: 24px; } .game-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .game-card-name { font-size: 0.9375rem; font-weight: 600; color: var(--color-text); } .game-card-desc { font-size: 0.8125rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .game-card-badge { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--color-border); border-radius: 50%; color: transparent; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring); } .game-card-badge.is-active { background: var(--game-color, var(--color-primary)); color: white; transform: scale(1.1); } .game-card-badge svg { width: 14px; height: 14px; } .game-selector-footer { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); background: var(--color-bg); } .game-selector-current { display: flex; align-items: center; gap: var(--space-2); font-size: 0.8125rem; } .current-game-label { color: var(--color-text-muted); } .current-game-name { font-weight: 600; color: var(--color-primary); } .game-selector-hint { font-size: 0.75rem; color: var(--color-text-muted); } .game-selector-hint strong { color: var(--color-text); } @media (max-width: 400px) { .game-selector-overlay { padding: var(--space-2); } .game-selector-container { max-height: 95%; border-radius: var(--radius-lg); } .game-selector-header { padding: var(--space-3); } .game-selector-title { font-size: 1rem; } .game-selector-grid { padding: var(--space-3); gap: var(--space-2); } .game-card { padding: var(--space-2); gap: var(--space-2); } .game-card-icon { width: 40px; height: 40px; } .game-card-icon svg { width: 20px; height: 20px; } .game-card-name { font-size: 0.875rem; } .game-card-desc { font-size: 0.75rem; } .game-selector-footer { flex-direction: column; gap: var(--space-1); text-align: center; } } @media (max-height: 400px) { .game-selector-grid { padding: var(--space-2); gap: var(--space-2); } .game-card { padding: var(--space-2); } .game-card-icon { width: 36px; height: 36px; } .game-card-desc { display: none; } } .game-selector-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-8) var(--space-4); text-align: center; gap: var(--space-4); min-height: 200px; } .game-selector-state-icon { width: 48px; height: 48px; color: var(--color-text-muted); } .game-selector-state-icon svg { width: 100%; height: 100%; } .game-selector-state-icon .is-spinning { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .game-selector-state-text { font-size: 0.9375rem; color: var(--color-text-muted); margin: 0; } .game-selector-error .game-selector-state-icon { color: var(--color-warning); } .game-selector-retry-btn { padding: var(--space-2) var(--space-4); background: var(--color-primary); color: white; border: none; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring); } .game-selector-retry-btn:hover { background: var(--color-primary-hover, #4f46e5); transform: scale(1.02); } .game-selector-retry-btn:active { transform: scale(0.98); } .game-selector-retry-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .game-selector-overlay, .game-selector-container, .game-card, .game-card-icon, .game-card-badge { transition: none; } .game-card.is-pending, .game-card.is-requested { animation: none; } .game-selector-state-icon .is-spinning { animation: none; } }