@layer components{.game-container{container-type:inline-size;max-width:75rem;margin-block:var(--space-8);margin-inline:auto;padding-inline:var(--space-4);@container (max-width: 640px){margin-block:var(--space-4);padding-inline:var(--space-2)}}.game-header{text-align:center;margin-bottom:var(--space-8);@container (max-width: 480px){margin-bottom:var(--space-6)}}.game-title{font-size:var(--text-5xl);font-weight:800;color:var(--color-brand);margin-bottom:var(--space-4);position:relative;display:inline-block;transition:color var(--transition-theme);&:after{content:"";position:absolute;bottom:-.5rem;left:50%;translate:-50% 0;width:60%;height:4px;background:linear-gradient(90deg,var(--color-brand),var(--color-accent));border-radius:var(--radius-full)}@container (max-width: 640px){font-size:var(--text-4xl)}@container (max-width: 480px){font-size:var(--text-3xl)}}.game-subtitle{font-size:var(--text-xl);color:var(--color-text-muted);transition:color var(--transition-theme);@container (max-width: 640px){font-size:var(--text-lg)}}.game-mode-selector{background:var(--color-surface-raised);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-md);margin-bottom:var(--space-8);text-align:center;border:1px solid var(--color-border);position:relative;overflow:hidden;transition:background var(--transition-theme);&:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgb(from var(--color-brand) r g b / 5%) 0%,transparent 50%);pointer-events:none}@container (max-width: 480px){padding:var(--space-6)}}.mode-selector-title{font-size:var(--text-2xl);font-weight:700;color:var(--color-text);margin-bottom:var(--space-6);position:relative;z-index:1;transition:color var(--transition-theme)}.mode-buttons{display:flex;gap:var(--space-6);justify-content:center;flex-wrap:wrap;margin-top:var(--space-4);position:relative;z-index:1;@container (max-width: 640px){flex-direction:column;align-items:center;gap:var(--space-4)}}.mode-button{padding:var(--space-6) var(--space-8);border:2px solid var(--color-border);border-radius:var(--radius-xl);font-weight:600;font-size:var(--text-lg);font-family:inherit;cursor:pointer;min-width:12.5rem;background:var(--color-surface-raised);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;text-align:center;transition:transform var(--transition-normal),box-shadow var(--transition-normal),background var(--transition-normal),border-color var(--transition-normal),color var(--transition-normal);&:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,oklch(100% 0 0 / 20%),transparent);translate:-100% 0;transition:translate var(--transition-slow)}&:hover:before{translate:100% 0}&:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}&.single-player{border-color:var(--color-brand);color:var(--color-brand);&:hover{background:var(--color-brand);color:#fff;transform:translateY(-4px);box-shadow:var(--shadow-brand)}}&.multiplayer{border-color:var(--color-accent);color:var(--color-accent);&:hover{background:var(--color-accent);color:#fff;transform:translateY(-4px);box-shadow:0 8px 20px rgb(from var(--color-accent) r g b / 30%)}}@container (max-width: 640px){min-width:100%;max-width:18.75rem;padding:var(--space-4) var(--space-6)}@container (max-width: 480px){padding:var(--space-3) var(--space-4);font-size:var(--text-base)}}.mode-icon{font-size:var(--text-4xl);margin-bottom:var(--space-2);display:block;transition:transform var(--transition-fast);.mode-button:hover &{transform:scale(1.1)}@container (max-width: 480px){font-size:var(--text-3xl)}}.mode-description{font-size:var(--text-sm);margin-top:var(--space-2);opacity:.8;line-height:1.4}.game-layout{display:grid;grid-template-columns:1fr;gap:var(--space-8);&.multiplayer-mode{@container (min-width: 1024px){grid-template-columns:17.5rem 1fr 17.5rem;gap:var(--space-6)}@container (max-width: 1023px){grid-template-columns:1fr}}}.game-main{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;max-width:50rem;margin-inline:auto;padding:var(--space-4);& tic-tac-toe{display:block;width:100%;margin-block:var(--space-4);min-height:31.25rem}}.multiplayer-sidebar{display:flex;flex-direction:column;gap:var(--space-4);@container (max-width: 1023px){order:-1;flex-direction:row;overflow-x:auto;gap:var(--space-3);padding-bottom:var(--space-2)}@container (max-width: 640px){flex-direction:column;overflow-x:visible}}.multiplayer-panel{background:var(--color-surface-raised);border-radius:var(--radius-xl);padding:var(--space-4);box-shadow:var(--shadow-md);border:1px solid var(--color-border);height:fit-content;transition:background var(--transition-theme),border-color var(--transition-theme);scrollbar-color:var(--color-brand) var(--color-surface-sunken);scrollbar-width:thin;@container (max-width: 1023px){min-width:17.5rem;flex-shrink:0}@container (max-width: 640px){min-width:auto}}.connection-status{background:#fffffff2;border:1px solid rgb(from var(--color-brand) r g b / 20%);border-radius:var(--radius-md);padding:var(--space-4);text-align:center;margin-bottom:var(--space-4);font-size:var(--text-sm);color:var(--color-brand);position:relative;overflow:hidden;transition:background var(--transition-theme);&:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,oklch(100% 0 0 / 30%),transparent);translate:-100% 0;animation:shimmer 2s infinite}&.success{background:#e5fde5;border-color:#b7e6b7;color:oklch(32% .12 145)}&.error{background:oklch(97% .04 25);border-color:oklch(88% .08 25);color:oklch(40% .18 25)}}.loading-indicator{display:inline-flex;align-items:center;gap:var(--space-2)}.loading-dots{display:inline-flex;gap:var(--space-1)}.loading-dot{width:.25rem;height:.25rem;background:currentColor;border-radius:50%;animation:loading-bounce 1.4s infinite both;&:nth-child(1){animation-delay:-.32s}&:nth-child(2){animation-delay:-.16s}&:nth-child(3){animation-delay:0s}}.game-component-wrapper{margin-top:var(--space-8);display:flex;justify-content:center;align-items:flex-start;position:relative;z-index:1}.game-card-wrapper{display:flex;flex-direction:column;align-items:center;width:100%;max-width:43.75rem;box-sizing:border-box;position:relative;z-index:1}.back-link{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-8);color:var(--color-text-muted);text-decoration:none;font-weight:500;font-size:var(--text-lg);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);transition:color var(--transition-fast),background var(--transition-fast),transform var(--transition-fast);&:before{content:"←";transition:transform var(--transition-fast)}&:hover{color:var(--color-text);background:rgb(from var(--color-brand) r g b / 10%);transform:translate(-4px);&:before{transform:translate(-2px)}}&:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}}.hidden{display:none!important}.theme-power-up{.game-title,.mode-selector-title,.mode-button{font-family:var(--font-display-power)}.game-title{text-transform:uppercase;letter-spacing:.1em}.mode-selector-title{text-transform:uppercase;letter-spacing:.05em}.mode-button{font-size:var(--text-xl);text-transform:uppercase;letter-spacing:.05em}.game-mode-selector:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 15px,rgb(from var(--color-brand) r g b / 2%) 15px,rgb(from var(--color-brand) r g b / 2%) 30px);pointer-events:none}}.theme-sparkle-play{.game-title,.mode-selector-title,.mode-button{font-family:var(--font-display-sparkle)}.game-mode-selector:after{content:"✨🎮✨";position:absolute;top:var(--space-4);right:var(--space-4);font-size:var(--text-lg);opacity:.3;animation:sparkle-rotate 3s ease-in-out infinite;pointer-events:none}}@media print{.game-container{max-width:none}.back-link{display:none}.game-mode-selector,.multiplayer-panel{box-shadow:none;border:1px solid var(--color-border)}.connection-status{display:none}}}@keyframes shimmer{0%{translate:-100% 0}to{translate:100% 0}}@keyframes loading-bounce{0%,80%,to{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}@keyframes sparkle-rotate{0%,to{transform:rotate(0) scale(1)}50%{transform:rotate(10deg) scale(1.1)}}