:root{--page-bg: #0a1f0a;--card-bg: #ffffff;--ink-primary: #1f1f1f;--ink-body: #5a5a5a;--accent: #7c3aed;--accent-dark: #5b21b6;--accent-light: #ede9fe;--gold: #FFD700;--success-green: #4CAF50;--success-btn: #2e9e44;--christmas-red: #C41E3A;--christmas-green: #0B6623;--burgundy-start: #3a1212;--burgundy-end: #260b0b;--font-display: "Amazon Ember Display", "Poppins", sans-serif;--font-body: "Poppins", sans-serif;--font-mono: "Amazon Ember Mono", "JetBrains Mono", monospace;--radius-card: 24px;--radius-btn: 12px;--shadow-offset: 0 7px 0}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--page-bg);font-family:var(--font-body);color:var(--ink-primary);min-height:100vh;overflow-x:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(1px 1px at 10% 20%,rgba(255,255,255,.6) 0%,transparent 100%),radial-gradient(1px 1px at 30% 60%,rgba(255,255,255,.4) 0%,transparent 100%),radial-gradient(1.5px 1.5px at 50% 10%,rgba(255,255,255,.7) 0%,transparent 100%),radial-gradient(1px 1px at 70% 80%,rgba(255,255,255,.5) 0%,transparent 100%),radial-gradient(1px 1px at 85% 30%,rgba(255,255,255,.4) 0%,transparent 100%),radial-gradient(1.5px 1.5px at 15% 90%,rgba(255,255,255,.6) 0%,transparent 100%),radial-gradient(1px 1px at 60% 45%,rgba(255,255,255,.3) 0%,transparent 100%),radial-gradient(1px 1px at 40% 75%,rgba(255,255,255,.5) 0%,transparent 100%),radial-gradient(1.5px 1.5px at 90% 55%,rgba(255,255,255,.4) 0%,transparent 100%),radial-gradient(1px 1px at 25% 35%,rgba(255,255,255,.6) 0%,transparent 100%);pointer-events:none;z-index:0}#root{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:24px 16px}.game-card{background:var(--card-bg);border:3px solid var(--accent);border-radius:var(--radius-card);box-shadow:var(--shadow-offset) var(--accent-dark);max-width:480px;width:100%;padding:32px 24px;position:relative}.game-card:before{content:"";position:absolute;top:-60px;right:-60px;width:200px;height:200px;background:radial-gradient(circle,rgba(124,58,237,.2) 0%,transparent 70%);opacity:.5;pointer-events:none;z-index:0;border-radius:var(--radius-card)}.game-card>*{position:relative;z-index:1}.game-header{text-align:center;margin-bottom:24px}.game-title{font-family:var(--font-display);font-weight:800;font-size:1.75rem;color:var(--ink-primary);line-height:1.2}.game-subtitle{font-family:var(--font-body);font-size:.9rem;color:var(--ink-body);font-style:italic;margin-top:4px}.game-meta{font-family:var(--font-mono);font-size:.55rem;text-transform:uppercase;letter-spacing:.25em;color:var(--accent);margin-top:8px}.move-counter{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px}.move-counter-label{font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-body)}.move-counter-value{font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--accent)}.puzzle-board{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px;aspect-ratio:1;width:100%;max-width:360px;margin:0 auto 20px;background:var(--accent-light);border-radius:12px;padding:4px;border:2px solid var(--accent)}.puzzle-tile{border-radius:8px;overflow:hidden;cursor:pointer;position:relative;min-height:44px;min-width:44px}.puzzle-tile img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.puzzle-tile.empty{background:transparent;cursor:default}.puzzle-tile.movable{box-shadow:0 0 0 2px var(--accent),0 2px 8px #7c3aed4d}.game-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border:none;border-radius:var(--radius-btn);font-family:var(--font-body);font-size:.875rem;font-weight:600;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;min-height:44px;min-width:44px}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 0 var(--accent-dark)}.btn-primary:hover{box-shadow:0 6px 0 var(--accent-dark)}.btn-secondary{background:var(--accent-light);color:var(--accent-dark);box-shadow:0 4px #7c3aed33}.btn-success{background:var(--success-btn);color:#fff;box-shadow:0 4px #1b7a2e}.btn-success:hover{box-shadow:0 6px #1b7a2e}.preview-thumbnail-container{display:flex;justify-content:center;margin-bottom:16px}.preview-thumbnail{position:relative;width:80px;height:80px;border-radius:12px;border:2px solid var(--accent);overflow:hidden;cursor:pointer;padding:0;background:none;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 3px 0 var(--accent-dark)}.preview-thumbnail:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--accent-dark)}.preview-thumbnail:active{transform:translateY(0);box-shadow:0 2px 0 var(--accent-dark)}.preview-thumbnail img{width:100%;height:100%;object-fit:cover;display:block}.preview-thumbnail-badge{position:absolute;bottom:0;left:0;right:0;background:#7c3aede6;color:#fff;font-family:var(--font-mono);font-size:.5rem;text-transform:uppercase;letter-spacing:.15em;padding:3px 0;display:flex;align-items:center;justify-content:center;gap:3px}.preview-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px}.preview-modal{background:var(--card-bg);border-radius:20px;border:3px solid var(--accent);box-shadow:0 7px 0 var(--accent-dark),0 20px 60px #0006;padding:24px;max-width:360px;width:100%;position:relative;text-align:center}.preview-modal img{width:100%;border-radius:12px;border:2px solid var(--accent-light);margin-bottom:12px}.preview-modal-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;border:none;background:var(--accent-light);color:var(--accent);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;min-height:44px;min-width:44px}.preview-modal-close:hover{background:var(--accent);color:#fff}.preview-modal-hint{font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-body);margin:0}.loading-state{text-align:center;padding:48px 24px}.loading-spinner{width:48px;height:48px;border:3px solid var(--accent-light);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px}@keyframes spin{to{transform:rotate(360deg)}}.loading-message{font-size:1rem;color:var(--ink-body);font-style:italic}.error-state{text-align:center;padding:32px 24px}.error-title{font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:var(--christmas-red);margin-bottom:8px}.error-message{color:var(--ink-body);margin-bottom:16px}.success-state{text-align:center;padding:24px}.success-title{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--success-green);margin-bottom:8px}.success-message{color:var(--ink-body);margin-bottom:16px}.success-score{display:inline-flex;align-items:center;gap:8px;background:var(--accent-light);padding:12px 24px;border-radius:100px;margin-bottom:20px}.success-score-label{font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-body)}.success-score-value{font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:var(--accent)}.success-image{width:100%;max-width:280px;border-radius:12px;border:3px solid var(--gold);box-shadow:0 4px 20px #ffd7004d;margin-bottom:20px}.share-card-preview{background:var(--accent-light);border-radius:16px;padding:16px;margin-bottom:16px}.footer-badge{text-align:center;margin-top:24px;padding-top:16px;border-top:1px solid #eee}.footer-badge-text{font-family:var(--font-mono);font-size:.55rem;text-transform:uppercase;letter-spacing:.3em;color:var(--ink-body)}.image-chip{display:inline-flex;align-items:center;gap:6px;background:#7c3aed14;padding:6px 12px;border-radius:100px;font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.15em;color:var(--accent-dark);margin-bottom:12px}.snowflake-corner{position:absolute;width:20px;height:20px;opacity:.3}.snowflake-corner.top-left{top:12px;left:12px}.snowflake-corner.bottom-right{bottom:12px;right:12px}@media (max-width: 480px){.game-card{padding:20px 16px;border-radius:20px}.game-title{font-size:1.5rem}.puzzle-board{max-width:300px}.game-actions{flex-direction:column;align-items:stretch}.btn{justify-content:center}}@media (max-width: 360px){.puzzle-board{max-width:260px}}
