:root{--color-primary: #1565c0;--color-primary-light: #1976d2;--color-success: #43a047;--color-success-dark: #2e7d32;--color-success-bg: #e8f5e9;--color-error: #d32f2f;--color-warning: #f9a825;--color-text: #212121;--color-text-muted: #888;--color-bg: #fafafa;--color-surface: #ffffff;--color-border: #e0e0e0;--font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-size-base: 16px;--font-size-sm: .875rem;--font-size-xs: .8rem;--font-size-lg: 1.25rem;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--radius: 4px;--radius-md: 8px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:var(--font-size-base)}body{font-family:var(--font-family);color:var(--color-text);background-color:var(--color-bg);line-height:1.6}h1,h2,h3{line-height:1.3}button{font-family:inherit;font-size:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.6}table{border-collapse:collapse;width:100%}th,td{padding:var(--space-xs) var(--space-sm);text-align:left}.app-layout{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}.app-container{max-width:800px;margin:0 auto;padding:0 var(--space-md);width:100%}.app-header{background-color:var(--color-primary);color:var(--color-surface);padding:var(--space-lg) 0}.app-header-row{display:flex;align-items:center;justify-content:space-between}.app-title{font-size:1.5rem;margin-bottom:var(--space-xs)}.app-subtitle{font-size:var(--font-size-sm);opacity:.85}.auth-logged-in-compact{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-size-xs);color:#ffffffd9}.auth-logged-in-compact button{font-size:var(--font-size-xs);padding:var(--space-xs) var(--space-sm);background:transparent;color:#ffffffb3;border:1px solid rgba(255,255,255,.3);border-radius:var(--radius);cursor:pointer}.auth-logged-in-compact button:hover{color:var(--color-surface);border-color:#fff9}.app-main{flex:1;padding:var(--space-xl) 0}.app-section{margin-bottom:var(--space-xl)}.app-section:last-child{margin-bottom:0}.app-error{color:var(--color-error)}.app-footer{background-color:var(--color-surface);border-top:1px solid var(--color-border);padding:var(--space-md) 0;color:var(--color-text-muted);font-size:var(--font-size-sm);text-align:center}.game-container{display:flex;flex-direction:column;gap:var(--space-sm)}.game-controls{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap}.game-move-count{font-size:var(--font-size-lg);font-weight:600;color:var(--color-text);min-width:6em}.game-clear-badge{display:inline-block;color:var(--color-surface);background-color:var(--color-success);font-weight:700;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius);animation:game-clear-pop .4s ease-out}@keyframes game-clear-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}.game-btn{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius);background-color:var(--color-surface);color:var(--color-text);font-size:var(--font-size-sm);transition:background-color .15s,border-color .15s,box-shadow .15s}.game-btn:hover:not(:disabled){background-color:#f0f0f0;border-color:#bdbdbd}.game-btn:active:not(:disabled){background-color:#e0e0e0;box-shadow:inset 0 1px 2px #00000026}.game-btn-primary{background-color:var(--color-primary);color:var(--color-surface);border-color:var(--color-primary)}.game-btn-primary:hover:not(:disabled){background-color:var(--color-primary-light);border-color:var(--color-primary-light)}.game-btn-primary:active:not(:disabled){background-color:#0d47a1;box-shadow:inset 0 1px 2px #0003}.game-result{padding:var(--space-sm) var(--space-md);background-color:var(--color-success-bg);border-radius:var(--radius-md);border:1px solid #c8e6c9}.game-result-title{font-weight:700;color:var(--color-success-dark)}.game-result-detail{margin-top:var(--space-xs);font-size:var(--font-size-sm)}.game-result-optimal{color:var(--color-warning);font-weight:600;margin-left:var(--space-sm)}.game-submitting{color:var(--color-primary-light)}.game-error{color:var(--color-error)}.game-puzzle-info{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap;font-size:var(--font-size-sm);color:var(--color-text-muted)}.game-difficulty-badge{display:inline-block;color:var(--color-surface);font-weight:700;font-size:var(--font-size-xs);padding:2px var(--space-sm);border-radius:var(--radius);text-transform:uppercase;letter-spacing:.05em}.game-metric,.game-hint{font-size:var(--font-size-xs);color:var(--color-text-muted)}.dpad{display:none;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:4px;width:150px;height:150px;margin:var(--space-sm) auto;user-select:none;-webkit-user-select:none}.dpad-btn{display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-surface);color:var(--color-text);font-size:1.25rem;min-width:48px;min-height:48px;touch-action:manipulation;transition:background-color .1s}.dpad-btn:active{background-color:#e0e0e0}.dpad-up{grid-column:2;grid-row:1}.dpad-left{grid-column:1;grid-row:2}.dpad-center{grid-column:2;grid-row:2}.dpad-right{grid-column:3;grid-row:2}.dpad-down{grid-column:2;grid-row:3}.dpad-arrow{pointer-events:none}@media(pointer:coarse){.dpad{display:grid}}.auth-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-xl);max-width:400px;margin:0 auto;box-shadow:0 2px 8px #00000014}.auth-tabs{display:flex;border-bottom:2px solid var(--color-border);margin-bottom:var(--space-lg)}.auth-tab{flex:1;padding:var(--space-sm) var(--space-md);border:none;background:none;font-size:var(--font-size-base);color:var(--color-text-muted);border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s}.auth-tab:hover{color:var(--color-text)}.auth-tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary);font-weight:600}.auth-field{margin-bottom:var(--space-md)}.auth-label{display:block;font-size:var(--font-size-sm);font-weight:600;margin-bottom:var(--space-xs);color:var(--color-text)}.auth-input{width:100%;padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius);font-family:inherit;font-size:var(--font-size-base);color:var(--color-text);background-color:var(--color-surface);transition:border-color .15s,box-shadow .15s}.auth-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #1565c026}.auth-input::placeholder{color:var(--color-text-muted)}.auth-submit{width:100%;padding:var(--space-sm) var(--space-md);border:none;border-radius:var(--radius);background-color:var(--color-primary);color:var(--color-surface);font-size:var(--font-size-base);font-weight:600;transition:background-color .15s,box-shadow .15s}.auth-submit:hover:not(:disabled){background-color:var(--color-primary-light)}.auth-submit:active:not(:disabled){background-color:#0d47a1;box-shadow:inset 0 1px 2px #0003}.auth-error{color:var(--color-error);font-size:var(--font-size-sm);margin-top:var(--space-sm)}.auth-logged-in{display:flex;align-items:center;gap:var(--space-md)}.auth-user-label{font-size:var(--font-size-sm);color:var(--color-text-muted)}.leaderboard{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-lg);box-shadow:0 2px 8px #00000014}.leaderboard-title{font-size:var(--font-size-lg);margin-bottom:var(--space-md)}.leaderboard-tabs{display:flex;border-bottom:2px solid var(--color-border);margin-bottom:var(--space-md)}.leaderboard-tab{flex:1;padding:var(--space-sm) var(--space-md);border:none;background:none;font-size:var(--font-size-base);color:var(--color-text-muted);border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s}.leaderboard-tab:hover:not(:disabled){color:var(--color-text)}.leaderboard-tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary);font-weight:600}.leaderboard-table{width:100%;border-collapse:collapse}.leaderboard-table th{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-muted);border-bottom:2px solid var(--color-border);padding:var(--space-sm)}.leaderboard-table td{padding:var(--space-sm);border-bottom:1px solid var(--color-border)}.leaderboard-table tbody tr:nth-child(2n){background-color:#f5f5f5}.leaderboard-table tbody tr:hover{background-color:#e3f2fd}.leaderboard-rank{font-weight:700;text-align:center;width:3em}.leaderboard-rank-1{color:#f9a825}.leaderboard-rank-2{color:#90a4ae}.leaderboard-rank-3{color:#8d6e63}.leaderboard-medal:before{margin-right:var(--space-xs)}.leaderboard-rank-1 .leaderboard-medal:before{content:"🥇"}.leaderboard-rank-2 .leaderboard-medal:before{content:"🥈"}.leaderboard-rank-3 .leaderboard-medal:before{content:"🥉"}.leaderboard-optimal{color:var(--color-warning);font-size:var(--font-size-lg)}.leaderboard-nodata,.leaderboard-loading{text-align:center;color:var(--color-text-muted);padding:var(--space-lg)}.leaderboard-error{color:var(--color-error);font-size:var(--font-size-sm);padding:var(--space-sm)}.app-header-actions{display:flex;align-items:center;gap:var(--space-sm)}.header-stats-btn{background:transparent;border:1px solid rgba(255,255,255,.3);color:#ffffffd9;border-radius:var(--radius);padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-base);cursor:pointer;line-height:1}.header-stats-btn:hover{color:var(--color-surface);border-color:#fff9}.overlay-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-md)}.overlay-card{background-color:var(--color-surface);border-radius:var(--radius-md);padding:var(--space-lg);max-width:420px;width:100%;max-height:80vh;max-height:80dvh;overflow-y:auto;box-shadow:0 8px 32px #0003}.overlay-close-btn{background:none;border:none;font-size:var(--font-size-lg);color:var(--color-text-muted);cursor:pointer;padding:var(--space-xs);line-height:1}.overlay-close-btn:hover{color:var(--color-text)}.clear-overlay-content{text-align:center}.clear-overlay-title{font-size:1.5rem;color:var(--color-success-dark);margin-bottom:var(--space-sm)}.clear-overlay-detail{font-size:var(--font-size-sm);margin-bottom:var(--space-md)}.clear-overlay-loading{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-md)}.clear-overlay-table{margin-bottom:var(--space-md);text-align:left}.clear-overlay-actions{display:flex;gap:var(--space-sm);justify-content:center;flex-wrap:wrap}.stats-overlay-content{display:flex;flex-direction:column;gap:var(--space-md)}.stats-overlay-header{display:flex;align-items:center;justify-content:space-between}.stats-overlay-title{font-size:var(--font-size-lg)}.stats-puzzle-counts{display:flex;flex-direction:column;gap:var(--space-sm)}.stats-total{font-size:var(--font-size-base)}.stats-by-difficulty{display:flex;gap:var(--space-md);flex-wrap:wrap}.stats-difficulty-item{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--font-size-sm)}.stats-difficulty-dot{display:inline-block;width:10px;height:10px;border-radius:50%}.stats-section-title{font-size:var(--font-size-base);font-weight:600}.stats-overlay-footer{display:flex;justify-content:center}.confirm-overlay-content{text-align:center;padding:var(--space-sm) 0}.confirm-overlay-message{font-size:var(--font-size-lg);font-weight:600;margin-bottom:var(--space-lg)}.confirm-overlay-actions{display:flex;gap:var(--space-sm);justify-content:center}@media(max-width:600px){.app-header{padding:var(--space-xs) 0}.app-title{font-size:1rem;margin-bottom:0}.app-subtitle{display:none}.app-main{padding:var(--space-sm) 0}.app-container{padding:0 var(--space-sm)}.app-section{margin-bottom:var(--space-sm)}.game-btn{min-height:44px;min-width:44px;padding:var(--space-sm) var(--space-md);font-size:var(--font-size-base)}.game-btn-primary{min-height:44px;padding:var(--space-sm) var(--space-lg)}.game-controls{gap:var(--space-sm)}.game-move-count{font-size:var(--font-size-base);min-width:auto;flex-basis:100%}.game-hint{font-size:var(--font-size-xs)}.auth-card{padding:var(--space-md);max-width:100%}.auth-submit{min-height:44px}.auth-tab{min-height:44px;padding:var(--space-sm)}.auth-input{min-height:44px}.leaderboard{padding:var(--space-md)}.leaderboard-tab{min-height:44px;padding:var(--space-sm);font-size:var(--font-size-sm)}.leaderboard-table th,.leaderboard-table td{padding:var(--space-xs);font-size:var(--font-size-sm)}}