.fours-app{min-height:100dvh;display:flex;flex-direction:column}.fours-main{flex:1;display:flex;flex-direction:column;align-items:center;padding:calc(var(--space-16) + var(--space-4)) var(--space-4) var(--space-6);gap:var(--space-4);width:100%}.fours-intro{max-width:480px;padding:var(--space-8);display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center}.fours-intro h1{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:900;letter-spacing:-.03em}.fours-intro>p{color:var(--color-text-secondary);max-width:28ch;line-height:1.6}.fours-canvas-wrap{width:100%;max-width:640px;aspect-ratio:4/3;background:var(--color-surface-overlay);border-radius:var(--radius-2xl);overflow:hidden;border:1px solid var(--color-border-subtle);cursor:grab}.fours-canvas-wrap:active{cursor:grabbing}#fours-canvas{width:100%;height:100%;display:block}.fours-status{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:640px;gap:var(--space-4)}.fours-player{flex:1;padding:var(--space-3);border-radius:var(--radius-xl);border:2px solid transparent;text-align:center;transition:border-color var(--duration-fast) ease}.fours-player[data-active]{border-color:var(--game-accent);background:var(--game-accent-subtle)}.fours-player p{font-size:var(--text-xs);color:var(--color-text-tertiary);font-weight:600;text-transform:uppercase;letter-spacing:.06em}.fours-player strong{font-family:var(--font-display);font-size:var(--text-sm);font-weight:800;color:var(--color-text-primary)}.fours-columns{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2);width:100%;max-width:640px}.fours-col-btn{padding:var(--space-2);border-radius:var(--radius-lg);background:var(--color-surface-raised);border:1.5px solid var(--color-border-default);font-family:var(--font-display);font-size:var(--text-xs);font-weight:700;color:var(--color-text-secondary);cursor:pointer;transition:all var(--duration-fast) ease}.fours-col-btn:hover:not(:disabled){border-color:var(--game-accent);color:var(--game-accent);background:var(--game-accent-subtle)}.fours-col-btn:disabled{opacity:.4;cursor:not-allowed}@media (prefers-reduced-motion: reduce){.fours-player,.fours-col-btn{transition:none}}.fours-result-banner{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:900;text-align:center;padding:var(--space-3) var(--space-6);border-radius:var(--radius-xl);margin-bottom:var(--space-4);width:100%;max-width:640px;animation:banner-pop var(--duration-normal) var(--ease-spring)}@keyframes banner-pop{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.fours-result-banner--win1{background:#3b82f61a;color:#3b82f6;border:2px solid rgba(59,130,246,.3)}.fours-result-banner--win2{background:#f973161a;color:#f97316;border:2px solid rgba(249,115,22,.3)}.fours-result-banner--draw{background:#9ca3af1a;color:#9ca3af;border:2px solid rgba(156,163,175,.3)}