@layer components{.game-container{max-width:75rem;margin-block:var(--space-8);padding-inline:var(--space-4);margin-inline:auto;container-type:inline-size;@container (width<=640px){margin-block:var(--space-4);padding-inline:var(--space-2)}}.game-header{text-align:center;margin-bottom:var(--space-8);@container (width<=480px){margin-bottom:var(--space-6)}}.game-title{font-size:var(--text-5xl);color:var(--color-brand);margin-bottom:var(--space-4);transition:color var(--transition-theme);font-weight:800;display:inline-block;position:relative;&:after{content:"";background:linear-gradient(90deg, var(--color-brand), var(--color-accent));border-radius:var(--radius-full);width:60%;height:4px;position:absolute;bottom:-.5rem;left:50%;translate:-50%}@container (width<=640px){font-size:var(--text-4xl)}@container (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 (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);transition:background var(--transition-theme);position:relative;overflow:hidden;&:before{content:"";background:radial-gradient(circle at 50% 0%, rgb(from var(--color-brand) r g b / 5%) 0%, transparent 50%);pointer-events:none;position:absolute;inset:0}@container (width<=480px){padding:var(--space-6)}}.mode-selector-title{font-size:var(--text-2xl);color:var(--color-text);margin-bottom:var(--space-6);z-index:1;transition:color var(--transition-theme);font-weight:700;position:relative}.mode-buttons{gap:var(--space-6);margin-top:var(--space-4);z-index:1;flex-wrap:wrap;justify-content:center;display:flex;position:relative;@container (width<=640px){align-items:center;gap:var(--space-4);flex-direction:column}}.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);cursor:pointer;background:var(--color-surface-raised);min-width:12.5rem;box-shadow:var(--shadow-sm);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);font-family:inherit;position:relative;overflow:hidden;&:before{content:"";transition:translate var(--transition-slow);background:linear-gradient(90deg,#0000,oklch(100% 0 0/.2),#0000);position:absolute;inset:0;translate:-100%}&:hover:before{translate:100%}&: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:oklch(100% 0 0);box-shadow:var(--shadow-brand);transform:translateY(-4px)}}&.multiplayer{border-color:var(--color-accent);color:var(--color-accent);&:hover{background:var(--color-accent);color:oklch(100% 0 0);box-shadow:0 8px 20px rgb(from var(--color-accent) r g b / 30%);transform:translateY(-4px)}}@container (width<=640px){min-width:100%;max-width:18.75rem;padding:var(--space-4) var(--space-6)}@container (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);transition:transform var(--transition-fast);display:block;.mode-button:hover &{transform:scale(1.1)}@container (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{gap:var(--space-8);grid-template-columns:1fr;display:grid;&.multiplayer-mode{@container (width>=1024px){gap:var(--space-6);grid-template-columns:17.5rem 1fr 17.5rem}@container (width<=1023px){grid-template-columns:1fr}}}.game-main{width:100%;max-width:50rem;padding:var(--space-4);flex-direction:column;justify-content:flex-start;align-items:center;margin-inline:auto;display:flex;& tic-tac-toe{width:100%;margin-block:var(--space-4);min-height:31.25rem;display:block}}.multiplayer-sidebar{gap:var(--space-4);flex-direction:column;display:flex;@container (width<=1023px){gap:var(--space-3);padding-bottom:var(--space-2);flex-direction:row;order:-1;overflow-x:auto}@container (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 (width<=1023px){flex-shrink:0;min-width:17.5rem}@container (width<=640px){min-width:auto}}.connection-status{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);transition:background var(--transition-theme);background:oklch(100% 0 0/.95);position:relative;overflow:hidden;&:before{content:"";background:linear-gradient(90deg,#0000,oklch(100% 0 0/.3),#0000);animation:2s infinite shimmer;position:absolute;inset:0;translate:-100%}&.success{color:oklch(32% .12 145);background:oklch(97% .04 145);border-color:oklch(88% .08 145)}&.error{color:oklch(40% .18 25);background:oklch(97% .04 25);border-color:oklch(88% .08 25)}}.loading-indicator{align-items:center;gap:var(--space-2);display:inline-flex}.loading-dots{gap:var(--space-1);display:inline-flex}.loading-dot{background:currentColor;border-radius:50%;width:.25rem;height:.25rem;animation:1.4s infinite both loading-bounce;&:first-child{animation-delay:-.32s}&:nth-child(2){animation-delay:-.16s}&:nth-child(3){animation-delay:0s}}.game-component-wrapper{margin-top:var(--space-8);z-index:1;justify-content:center;align-items:flex-start;display:flex;position:relative}.game-card-wrapper{box-sizing:border-box;z-index:1;flex-direction:column;align-items:center;width:100%;max-width:43.75rem;display:flex;position:relative}.back-link{align-items:center;gap:var(--space-2);margin-top:var(--space-8);color:var(--color-text-muted);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);text-decoration:none;display:inline-flex;&: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:"";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;position:absolute;inset:0}}.theme-sparkle-play{& .game-title,& .mode-selector-title,& .mode-button{font-family:var(--font-display-sparkle)}& .game-mode-selector:after{content:"✨🎮✨";top:var(--space-4);right:var(--space-4);font-size:var(--text-lg);opacity:.3;pointer-events:none;animation:3s ease-in-out infinite sparkle-rotate;position:absolute}}@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%}to{translate:100%}}@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)}}