@layer components{.game-container{max-width:87.5rem;margin-block:var(--space-8);padding-inline:var(--space-4);margin-inline:auto;container-type:inline-size;@container (width<=768px){margin-block:var(--space-4);padding-inline:var(--space-2)}@container (width<=480px){margin-block:var(--space-2)}}.game-header{text-align:center;margin-bottom:var(--space-8)}.game-title{font-size:var(--text-5xl);color:var(--color-brand);margin-bottom:var(--space-2);transition:color var(--transition-theme);font-weight:800;@container (width<=768px){font-size:var(--text-4xl)}@container (width<=480px){font-size:var(--text-3xl)}}.game-subtitle{font-size:var(--text-lg);color:var(--color-text-muted);transition:color var(--transition-theme);font-weight:500}.game-mode-selector{background:var(--color-surface-raised);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-lg);border:1px solid var(--color-border);margin-bottom:var(--space-8);transition:background var(--transition-theme);@container (width<=768px){padding:var(--space-6)}@container (width<=480px){padding:var(--space-4)}}.mode-selector-title{font-size:var(--text-2xl);text-align:center;color:var(--color-text);margin-bottom:var(--space-8);transition:color var(--transition-theme);font-weight:700;@container (width<=768px){font-size:var(--text-xl)}}.mode-buttons{gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(18.75rem,1fr));max-width:50rem;margin-inline:auto;display:grid;@container (width<=768px){gap:var(--space-4);grid-template-columns:1fr}}.mode-button{background:var(--color-surface-raised);border:2px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);cursor:pointer;text-align:center;transition:transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal), background 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);background:rgb(from var(--color-brand) r g b / 6%);&:hover{border-color:var(--color-brand);background:rgb(from var(--color-brand) r g b / 12%);box-shadow:0 15px 30px rgb(from var(--color-brand) r g b / 20%);transform:translateY(-2px)}}&.multiplayer{border-color:var(--color-accent);background:rgb(from var(--color-accent) r g b / 6%);&:hover{border-color:var(--color-accent);background:rgb(from var(--color-accent) r g b / 12%);box-shadow:0 15px 30px rgb(from var(--color-accent) r g b / 20%);transform:translateY(-2px)}}& strong{font-size:var(--text-xl);color:var(--color-text);margin-bottom:var(--space-2);transition:color var(--transition-theme);font-weight:700;display:block}@container (width<=768px){padding:var(--space-6)}@container (width<=480px){padding:var(--space-4)}}.mode-icon{font-size:var(--text-4xl);margin-bottom:var(--space-4);display:block;@container (width<=768px){font-size:var(--text-3xl)}}.mode-description{color:var(--color-text-muted);font-size:var(--text-base);transition:color var(--transition-theme);line-height:1.5}.game-layout{gap:var(--space-8);grid-template-columns:1fr;align-items:start;display:grid;&.hidden{display:none}&:has(>.multiplayer-sidebar:not(.hidden)){grid-template-columns:18.75rem 1fr 18.75rem;@container (width>=1200px){gap:var(--space-4);grid-template-columns:15.625rem 1fr 15.625rem}@container (width<=1024px){gap:var(--space-4);grid-template-columns:1fr}}}.game-main{background:var(--color-surface-raised);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);min-height:37.5rem;transition:background var(--transition-theme);position:relative;@container (width<=1024px){order:1}}.multiplayer-sidebar{gap:var(--space-4);flex-direction:column;display:flex;&.hidden{display:none}@container (width<=1024px){order:2;&#social-panel{gap:var(--space-4);flex-direction:row;order:3;& .multiplayer-panel{flex:1}@container (width<=768px){flex-direction:column}}}}.multiplayer-panel{background:var(--color-surface-raised);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);border:1px solid var(--color-border);transition:background var(--transition-theme), border-color var(--transition-theme);scrollbar-color:var(--color-brand) var(--color-surface-sunken);scrollbar-width:thin;overflow:hidden}.connection-status{background:oklch(from var(--color-surface-raised) l c h / 95%);backdrop-filter:blur(10px);border-radius:var(--radius-xl);z-index:10;transition:background var(--transition-theme);justify-content:center;align-items:center;display:flex;position:absolute;inset:0;&.hidden{display:none}}.loading-indicator{text-align:center;color:var(--color-text-muted);& span{font-size:var(--text-lg);margin-bottom:var(--space-4);color:var(--color-text);font-weight:600;display:block}}.loading-dots{justify-content:center;gap:var(--space-2);display:flex}.loading-dot{background:var(--color-brand);border-radius:50%;width:.625rem;height:.625rem;animation:1.4s infinite both loading-bounce;&:first-child{animation-delay:-.32s}&:nth-child(2){animation-delay:-.16s}&:nth-child(3){animation-delay:0s}}.back-link{align-items:center;gap:var(--space-2);color:var(--color-text-muted);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);margin-top:var(--space-8);transition:color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);font-weight:500;text-decoration:none;display:inline-flex;&:before{content:"←";font-size:var(--text-xl)}&:hover{color:var(--color-text);background:var(--color-surface-sunken);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,& .mode-selector-title{text-transform:uppercase;letter-spacing:.05em}}.theme-sparkle-play{& .game-title,& .mode-selector-title,& .mode-button{font-family:var(--font-display-sparkle)}}@media (prefers-contrast:high){.mode-button{border-width:3px}}@media print{.game-container{max-width:none}.game-mode-selector,.multiplayer-panel{box-shadow:none;border:1px solid var(--color-border)}}}@keyframes loading-bounce{0%,80%,to{opacity:.5;transform:scale(.6)}40%{opacity:1;transform:scale(1)}}