:root { --color-bg: #0f0f13; --color-surface: #1a1a1f; --color-surface-elevated: #232329; --color-border: #3a3a42; --color-text: #e8e8eb; --color-text-muted: #8a8a94; --color-text-dim: #5a5a64; --color-primary: #6366f1; --color-primary-hover: #818cf8; --color-primary-dim: rgba(99, 102, 241, 0.15); --color-success: #22c55e; --color-success-dim: rgba(34, 197, 94, 0.15); --color-danger: #ef4444; --color-danger-dim: rgba(239, 68, 68, 0.15); --color-warning: #f59e0b; --color-warning-dim: rgba(245, 158, 11, 0.15); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } @media (prefers-color-scheme: light) { :root { --color-bg: #f5f5f7; --color-surface: #ffffff; --color-surface-elevated: #ffffff; --color-border: #e5e5ea; --color-text: #1a1a1f; --color-text-muted: #6b6b78; --color-text-dim: #8a8a94; } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; width: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; } .menu-wrapper { display: flex; flex-direction: column; height: 100%; padding: var(--space-4); overflow-y: auto; overflow-x: hidden; } .menu-header { text-align: center; margin-bottom: var(--space-4); flex-shrink: 0; } .menu-title { font-size: 1.5rem; font-weight: 700; color: var(--color-text); margin-bottom: var(--space-1); } .menu-subtitle { font-size: 0.875rem; color: var(--color-text-muted); } .status-banner { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-4); flex-shrink: 0; } .status-banner.is-waiting { background: var(--color-warning-dim); border-color: var(--color-warning); } .status-banner.is-connected { background: var(--color-success-dim); border-color: var(--color-success); } .status-icon { width: 20px; height: 20px; color: var(--color-text-muted); } .status-banner.is-waiting .status-icon { color: var(--color-warning); animation: pulse 1.5s ease-in-out infinite; } .status-banner.is-connected .status-icon { color: var(--color-success); } .status-icon svg { width: 100%; height: 100%; display: none; } .status-banner.is-waiting .icon-waiting, .status-banner:not(.is-waiting):not(.is-connected) .icon-waiting { display: block; } .status-banner.is-connected .icon-connected { display: block; } .status-text { font-size: 0.875rem; font-weight: 500; } .status-banner.is-waiting .status-text { color: var(--color-warning); } .status-banner.is-connected .status-text { color: var(--color-success); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .proposal-banner { display: none; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--color-primary-dim); border: 2px solid var(--color-primary); border-radius: var(--radius-lg); margin-bottom: var(--space-4); flex-shrink: 0; animation: slideIn var(--duration-normal) var(--ease-out); } .proposal-banner.is-visible { display: flex; } @keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .proposal-content { display: flex; align-items: center; gap: var(--space-3); } .proposal-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--color-surface); border-radius: var(--radius-md); color: var(--color-primary); flex-shrink: 0; } .proposal-icon svg { width: 24px; height: 24px; } .proposal-info { display: flex; flex-direction: column; gap: 2px; } .proposal-label { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .proposal-game-name { font-size: 1.125rem; font-weight: 600; color: var(--color-text); } .proposal-actions { display: flex; gap: var(--space-2); } .proposal-actions .btn { flex: 1; } .my-proposal-banner { display: none; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-4); flex-shrink: 0; } .my-proposal-banner.is-visible { display: flex; } .my-proposal-content { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; } .my-proposal-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--color-primary-dim); border-radius: var(--radius-sm); color: var(--color-primary); flex-shrink: 0; } .my-proposal-icon svg { width: 18px; height: 18px; } .my-proposal-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .my-proposal-label { font-size: 0.6875rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .my-proposal-game-name { font-size: 0.875rem; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .my-proposal-status { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex-shrink: 0; } .waiting-dots { display: flex; gap: 2px; } .waiting-dots span { animation: dotPulse 1.4s ease-in-out infinite; color: var(--color-primary); font-weight: bold; } .waiting-dots span:nth-child(2) { animation-delay: 0.2s; } .waiting-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes dotPulse { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } } .status-label { font-size: 0.75rem; color: var(--color-text-muted); display: none; } @media (min-width: 400px) { .status-label { display: inline; } } .cooldown-banner { display: none; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-danger-dim); border: 1px solid var(--color-danger); border-radius: var(--radius-md); margin-bottom: var(--space-4); font-size: 0.8125rem; color: var(--color-danger); flex-shrink: 0; } .cooldown-banner.is-visible { display: flex; } .cooldown-banner svg { width: 16px; height: 16px; flex-shrink: 0; } .games-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); flex: 1; align-content: start; } .game-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-lg); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-fast) var(--ease-out); text-align: center; min-height: 160px; } .game-card:hover:not(.is-disabled) { border-color: var(--game-color, var(--color-primary)); background: var(--color-surface-elevated); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } .game-card:active:not(.is-disabled) { transform: translateY(0) scale(0.98); } .game-card.is-disabled { opacity: 0.5; cursor: not-allowed; } .game-card.is-proposed { border-color: var(--color-primary); background: var(--color-primary-dim); } .game-card.is-incoming { border-color: var(--color-success); background: var(--color-success-dim); animation: incomingPulse 2s ease-in-out infinite; } @keyframes incomingPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } } .game-card-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--color-bg); border-radius: var(--radius-md); color: var(--game-color, var(--color-primary)); transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring); } .game-card:hover:not(.is-disabled) .game-card-icon { transform: scale(1.1); } .game-card.is-proposed .game-card-icon, .game-card.is-incoming .game-card-icon { background: var(--color-surface); } .game-card-icon svg { width: 28px; height: 28px; } .game-card-name { font-size: 0.9375rem; font-weight: 600; color: var(--color-text); } .game-card-desc { font-size: 0.75rem; color: var(--color-text-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .game-card-badge { position: absolute; top: var(--space-2); right: var(--space-2); padding: 2px 6px; background: var(--color-primary); border-radius: var(--radius-sm); font-size: 0.625rem; font-weight: 600; color: white; text-transform: uppercase; } .game-card { position: relative; } .game-card.is-proposed .game-card-badge { display: block; background: var(--color-primary); } .game-card.is-incoming .game-card-badge { display: block; background: var(--color-success); } .game-card:not(.is-proposed):not(.is-incoming) .game-card-badge { display: none; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: none; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring); } .btn:active { transform: scale(0.97); } .btn svg { width: 16px; height: 16px; } .btn-accept { background: var(--color-success); color: white; } .btn-accept:hover { background: #16a34a; } .btn-reject { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); } .btn-reject:hover { background: var(--color-danger-dim); border-color: var(--color-danger); color: var(--color-danger); } .btn-cancel { background: transparent; color: var(--color-text-muted); padding: var(--space-2); } .btn-cancel:hover { color: var(--color-danger); } .menu-footer { margin-top: auto; padding-top: var(--space-4); text-align: center; flex-shrink: 0; } .footer-hint { font-size: 0.75rem; color: var(--color-text-dim); } @media (max-height: 500px) { .menu-wrapper { padding: var(--space-2); } .menu-header { margin-bottom: var(--space-2); } .menu-title { font-size: 1.25rem; } .menu-subtitle { display: none; } .status-banner, .proposal-banner, .my-proposal-banner { margin-bottom: var(--space-2); padding: var(--space-2); } .games-grid { gap: var(--space-2); } .game-card { padding: var(--space-3); min-height: 120px; } .game-card-icon { width: 40px; height: 40px; } .game-card-icon svg { width: 20px; height: 20px; } .game-card-desc { display: none; } .menu-footer { display: none; } } @media (max-width: 320px) { .games-grid { grid-template-columns: 1fr 1fr; } .game-card { min-height: 100px; } .game-card-name { font-size: 0.8125rem; } } @media (prefers-reduced-motion: reduce) { .game-card, .btn, .proposal-banner, .status-icon { transition: none; animation: none; } }