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