body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,sans-serif}#root{box-sizing:border-box;flex-direction:column;max-width:100%;min-height:100svh;margin:0 auto;display:flex}h1,h2{color:#1a1a1a;font-weight:700}p{margin:0}*{box-sizing:border-box;margin:0;padding:0}body{color:#1a1a1a;background:#fafaf8;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,sans-serif}.app{min-height:100vh}.home-view{background:radial-gradient(circle at top,#fff5ebf2 0%,#fff5eb00 34%),radial-gradient(circle at 0 100%,#d7ccc838 0%,#d7ccc800 28%),#fafaf8;flex-direction:column;min-height:100vh;padding:34px 20px 48px;display:flex}.app-header{text-align:center;margin-bottom:42px;animation:.6s ease-out fadeIn}.eyebrow{color:#8d6e63;letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px;font-size:.78rem;font-weight:700}.app-header h1{color:#8d6e63;letter-spacing:-.04em;font-family:Georgia,Times New Roman,serif;font-size:3.35rem;font-weight:800;line-height:.95}.tagline{color:#8f8b88;letter-spacing:.08em;text-transform:uppercase;margin-top:14px;font-size:1.02rem;font-weight:500}.home-container{flex-direction:column;flex:1;justify-content:center;gap:24px;width:100%;max-width:560px;margin:0 auto;display:flex}.top-actions{justify-content:space-between;align-items:center;gap:14px;display:flex}.player-card{box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border:0;flex:1;justify-content:flex-start;align-items:center;gap:14px;padding:0;animation:.5s ease-out slideUp;display:flex}.player-card .label{color:#8d6e63;text-transform:uppercase;letter-spacing:.16em;margin:0;font-size:.94rem;font-weight:800}.player-chip{color:#8d6e63;letter-spacing:0;min-height:auto;box-shadow:none;background:0 0;border:0;border-radius:0;justify-content:center;align-items:center;padding:0;font-size:1rem;font-weight:500;display:inline-flex}.upload-section{background:#ffffffd1;border:1px solid #ece5df;border-radius:24px;padding:30px;animation:.5s ease-out .1s both slideUp;box-shadow:0 18px 38px #5d40370f}.upload-section h2{color:#1a1a1a;letter-spacing:-.04em;margin-bottom:10px;font-size:2rem;font-weight:800}.upload-section>p{color:#666;margin-bottom:24px;font-size:1rem;line-height:1.5}.upload-area{cursor:pointer;background:radial-gradient(circle at top,#ffffffe6 0%,#fff0 36%),#fff8f5;border:2px dashed #d7ccc8;border-radius:22px;flex-direction:column;justify-content:center;align-items:center;padding:58px 24px;transition:all .3s;display:flex;position:relative;overflow:hidden}.upload-area:hover{background:#fff3ed;border-color:#8d6e63;box-shadow:0 16px 28px #8d6e6317}.upload-area:active{transform:scale(.98)}.upload-area.drag-over{background:#fff3ed;border-style:solid;border-color:#8d6e63;transform:scale(1.01)}.upload-area.has-image{padding:18px}.file-input{display:none}.upload-content{pointer-events:none;text-align:center}.upload-icon{color:#8d6e63;background:#ffffffb8;border:1px solid #d7ccc8e6;border-radius:50%;place-items:center;width:76px;height:76px;margin:0 auto 18px;font-size:2.5rem;font-weight:300;display:inline-grid}.upload-text{color:#5d4037;letter-spacing:-.03em;margin-bottom:10px;font-size:1.25rem;font-weight:700}.upload-hint{color:#999;font-size:.98rem}.preview-content{pointer-events:none;text-align:center;width:100%}.image-preview{object-fit:contain;border-radius:16px;width:100%;max-height:300px;margin-bottom:14px}.preview-hint{color:#999;font-size:.92rem;font-weight:500}.upload-footnote{color:#8d6e63;text-align:center;margin-top:14px;font-size:.9rem}.start-btn,.quit-btn{cursor:pointer;border:none;border-radius:8px;padding:12px 30px;font-size:1rem;font-weight:600;transition:all .3s}.start-btn{color:#fff;background:linear-gradient(135deg,#a1887f 0%,#8d6e63 100%);border-radius:14px;width:100%;margin-top:22px;padding:16px 30px;box-shadow:0 14px 24px #8d6e632e}.start-btn:hover:not(:disabled){background:#6d4c41;transform:translateY(-1px);box-shadow:0 4px 12px #8d6e6333}.start-btn:disabled{opacity:.5;cursor:not-allowed}.quit-btn{color:#8d6e63;background:0 0;border:1px solid #d7ccc8;margin-top:15px}.quit-btn:hover{background:#fff8f5;border-color:#8d6e63}.leaderboard-link-btn{color:#8d6e63;cursor:pointer;background:#ffffffd6;border:2px solid #d7ccc8;border-radius:18px;justify-content:center;align-items:center;gap:12px;width:100%;margin-top:4px;padding:18px 30px;font-size:1.1rem;font-weight:800;transition:all .3s;animation:.5s ease-out .2s both slideUp;display:flex;box-shadow:0 14px 26px #5d40370d}.leaderboard-link-btn:hover{background:#fff8f5;border-color:#8d6e63;transform:translateY(-1px)}.leaderboard-link-icon{font-size:1.35rem;line-height:1}.leaderboard-quick-btn{color:#8d6e63;cursor:pointer;background:#fff3ed;border:1px solid #e8d9cf;border-radius:999px;flex:none;justify-content:center;align-items:center;gap:8px;min-height:46px;padding:0 16px;font-size:.95rem;font-weight:800;transition:all .25s;animation:.5s ease-out 80ms both slideUp;display:inline-flex;box-shadow:0 10px 20px #5d40370f}.leaderboard-quick-btn:hover{background:#fff8f5;border-color:#8d6e63;transform:translateY(-1px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (width<=600px){.app-header h1{font-size:2.65rem}.home-view{padding:28px 16px 34px}.app-header{margin-bottom:30px}.player-card,.upload-section{padding:22px 18px}.top-actions{flex-direction:column;align-items:stretch;gap:12px}.player-card{flex-wrap:wrap;justify-content:center;gap:10px;padding:0}.leaderboard-quick-btn{width:100%;min-height:50px}.upload-area{padding:42px 15px}.upload-area.has-image{padding:15px}.upload-icon{width:64px;height:64px;font-size:2rem}.image-preview{max-height:220px}.upload-section h2{font-size:1.7rem}.player-chip{font-size:.92rem}}.puzzle-board{background:#fafaf8;flex-direction:column;min-height:100vh;padding:20px;display:flex}.puzzle-header{justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px;padding:0 10px;display:flex}.header-left h1{color:#8d6e63;margin:0 0 4px;font-size:1.8rem;font-weight:700}.progress-text{color:#999;margin:0;font-size:.85rem;font-weight:500}.timer{color:#8d6e63;text-align:right;min-width:80px;font-family:Courier New,monospace;font-size:1.8rem;font-weight:700}.header-actions{align-items:center;gap:8px;display:flex}.back-icon-btn,.reset-btn{color:#999;cursor:pointer;background:#fff;border:1px solid #e8e8e6;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;padding:0;font-size:1.2rem;transition:all .3s;display:flex}.back-icon-btn:hover,.reset-btn:hover{color:#5d4037;background:#fff8f5;border-color:#d7ccc8}.back-icon-btn:active,.reset-btn:active{transform:scale(.95)}.reset-btn{font-size:1.4rem}.swap-hint{text-align:center;color:#8d6e63;margin:0 0 12px;font-size:.85rem;font-weight:500;animation:.2s ease-out fadeIn}.board-container{flex:1;justify-content:center;align-items:center;min-height:400px;display:flex;position:relative}.puzzle-grid{aspect-ratio:1;touch-action:none;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:500px;display:grid}.puzzle-piece{cursor:grab;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;background-position:50%;background-size:cover;border:2px solid #e8e8e6;border-radius:8px;transition:all .2s;box-shadow:0 2px 6px #0000000f}.puzzle-piece:active{cursor:grabbing}.puzzle-piece:hover{border-color:#d7ccc8;transform:scale(1.02);box-shadow:0 4px 12px #0000001a}.puzzle-piece.dragging{opacity:.5;border-color:#8d6e63;transform:scale(.96)}.puzzle-piece.selected{border-color:#8d6e63;animation:1.5s ease-in-out infinite pulseSelected;transform:scale(1.04);box-shadow:0 0 0 3px #8d6e634d,0 4px 12px #0000001f}.puzzle-piece.touch-dragging{opacity:.92;z-index:20;pointer-events:none;cursor:grabbing;border-color:#8d6e63;box-shadow:0 14px 28px #00000038}.puzzle-piece.touch-target{border-color:#8d6e63;box-shadow:0 0 0 4px #8d6e632e}.puzzle-piece.solved{border-color:#7cb342;animation:.4s ease-out pieceCorrect;box-shadow:0 0 10px #7cb3424d}.puzzle-loading{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:20px;display:flex}.puzzle-loading p{color:#999;font-size:1rem;font-weight:500}.loading-spinner{border:3px solid #e8e8e6;border-top-color:#8d6e63;border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pieceCorrect{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes pulseSelected{0%,to{box-shadow:0 0 0 3px #8d6e634d,0 4px 12px #0000001f}50%{box-shadow:0 0 0 5px #8d6e6333,0 4px 12px #0000001f}}.completion-overlay{background:#0000004d;border-radius:8px;justify-content:center;align-items:center;animation:.3s ease-out fadeIn;display:flex;position:absolute;inset:0}.completion-popup{text-align:center;background:#fff;border-radius:12px;padding:40px;animation:.4s ease-out scaleIn;box-shadow:0 10px 40px #00000026}.popup-icon{color:#7cb342;margin-bottom:15px;font-size:3rem;font-weight:700}.popup-text{color:#1a1a1a;margin:0;font-size:1.1rem;font-weight:600}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media (width<=800px){.puzzle-grid{gap:10px;max-width:90vw}}@media (width<=600px){.puzzle-board{padding:15px}.puzzle-header{gap:10px;margin-bottom:15px;padding:0 5px}.header-left h1{font-size:1.4rem}.timer{min-width:70px;font-size:1.4rem}.back-icon-btn,.reset-btn{width:36px;height:36px;font-size:1rem}.reset-btn{font-size:1.2rem}.puzzle-grid{gap:8px;max-width:100%}.puzzle-piece{border-radius:6px;transition:transform .12s,box-shadow .12s,border-color .12s,opacity .12s}.completion-popup{padding:30px 20px}.popup-icon{font-size:2.5rem}.popup-text{font-size:1rem}}.puzzle-game{background:#fafaf8;min-height:100vh}.completion-view{background:#fafaf8;flex-direction:column;min-height:100vh;padding:40px 20px;display:flex}.completion-view .app-header{margin-bottom:60px}.completion-container{flex-direction:column;flex:1;justify-content:center;align-items:center;max-width:480px;margin:0 auto;animation:.5s ease-out slideUp;display:flex}.completion-badge{background:#fff;border:2px solid #d7ccc8;border-radius:50%;justify-content:center;align-items:center;width:100px;height:100px;margin-bottom:30px;display:flex;box-shadow:0 2px 8px #0000000a}.completion-icon{color:#7cb342;font-size:2.5rem;font-weight:700}.completion-container h2{color:#1a1a1a;margin-bottom:15px;font-size:2rem;font-weight:700}.completion-time{color:#8d6e63;margin-bottom:10px;font-family:Courier New,monospace;font-size:3rem;font-weight:700}.completion-player{color:#666;margin-bottom:40px;font-size:1rem}@media (width<=600px){.completion-view{padding:30px 16px}.completion-container h2{font-size:1.5rem}.completion-time{font-size:2.5rem}.completion-badge{width:80px;height:80px}.completion-icon{font-size:2rem}}.leaderboard-shell{background:#fafaf8;justify-content:center;align-items:flex-start;min-height:100vh;padding:110px 20px 48px;display:flex}.leaderboard-frame{justify-content:center;width:100%;display:flex}.leaderboard-card{background:#fffbf7;border:3px solid #d7ccc8;border-radius:24px;width:min(100%,430px);padding:28px 30px 30px;box-shadow:0 8px 32px #5d403714}.leaderboard-title{color:#8d6e63;letter-spacing:-.03em;align-items:center;gap:12px;margin:0 0 22px;font-family:Trebuchet MS,Avenir Next,sans-serif;font-size:clamp(2rem,4vw,2.45rem);font-weight:800;line-height:1.08;display:flex}.leaderboard-trophy{font-size:2rem;line-height:1}.timeframe-selector{background:#fff8f5;border:1px solid #d7ccc8;border-radius:999px;grid-template-columns:repeat(3,1fr);gap:0;margin-bottom:26px;padding:4px;display:grid}.filter-btn{color:#8d6e63;cursor:pointer;background:0 0;border:0;border-radius:999px;padding:12px 8px;font-size:.95rem;font-weight:700;transition:background .2s,color .2s}.filter-btn.active{color:#fff;background:linear-gradient(135deg,#a1887f 0%,#8d6e63 100%)}.leaderboard-table{margin-bottom:30px}.leaderboard-headings{color:#8d6e63;grid-template-columns:70px minmax(0,1fr) 86px;gap:12px;padding:0 10px 10px;font-size:.98rem;font-weight:800;display:grid}.leaderboard-message{color:#6d4c41;text-align:center;background:#fff;border:2px solid #d7ccc8;border-radius:14px;padding:24px 18px;font-weight:600}.leaderboard-rows{background:#fff;border:2px solid #d7ccc8;border-radius:14px;overflow:hidden}.leaderboard-row{border-bottom:1px solid #e8e8e6;grid-template-columns:70px minmax(0,1fr) 86px;align-items:center;gap:12px;min-height:56px;padding:0 12px;display:grid}.leaderboard-row:last-child{border-bottom:0}.leaderboard-rank{color:#3e2723;text-align:center;font-size:1rem;font-weight:500}.leaderboard-player{align-items:center;gap:10px;min-width:0;display:flex}.player-avatar{background:linear-gradient(#d7ccc8 0%,#8d6e63 100%);border-radius:50%;flex:0 0 28px;width:28px;height:28px;position:relative}.player-avatar:before{content:"";background:#fff8f5;border-radius:50%;width:10px;height:10px;position:absolute;top:5px;left:9px}.player-avatar:after{content:"";background:#fff8f5;border-radius:10px 10px 8px 8px;width:16px;height:9px;position:absolute;bottom:4px;left:6px}.player-name{color:#3e2723;text-overflow:ellipsis;white-space:nowrap;font-size:.98rem;font-weight:500;overflow:hidden}.leaderboard-time{color:#3e2723;text-align:right;white-space:nowrap;font-size:.98rem;font-weight:500}.back-home-btn{color:#fff;cursor:pointer;background:#8d6e63;border:0;border-radius:10px;width:100%;padding:18px 20px;font-size:1rem;font-weight:800;transition:filter .2s,transform .2s}.back-home-btn:hover{filter:brightness(.97);transform:translateY(-1px)}@media (width<=520px){.leaderboard-shell{padding:82px 14px 32px}.leaderboard-card{border-width:3px;border-radius:20px;padding:24px 18px 22px}.leaderboard-title{gap:10px;margin-bottom:18px;font-size:1.8rem}.leaderboard-headings,.leaderboard-row{grid-template-columns:58px minmax(0,1fr) 76px;gap:10px}.leaderboard-headings{padding-inline:6px;font-size:.92rem}.leaderboard-row{padding-inline:10px}.player-name,.leaderboard-time,.leaderboard-rank{font-size:.94rem}.back-home-btn{padding:16px 18px}}