@import"https://fonts.googleapis.com/css2?family=Lora:wght@400;500;700&family=Playfair+Display:wght@500;700&display=swap";:root{--bg: #FAF6EE;--surface: #FFFFFF;--primary: #7C5CFA;--primary-dark: #6447E0;--accent: #E8867E;--text: #3D2F1F;--text-muted: #8B7458;--border: #E8DDC9;--success: #7BA694;--warning: #D4A574;--danger: #E07A7A;--radius: 12px;--shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04)}body{margin:0;padding:0;background:radial-gradient(circle at 25% 25%,#7C5CFA0a 1px,transparent 1px),var(--bg);background-size:3px 3px,cover;color:var(--text);font-family:Lora,Crimson Text,"Source Han Serif SC",serif;display:flex;justify-content:center;align-items:center;min-height:100vh;overflow:auto;box-sizing:border-box}.app-container{background-color:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem;max-width:90%;width:700px;display:flex;flex-direction:column;align-items:center;gap:1.5rem;position:relative;border:1px solid var(--border);background-image:radial-gradient(circle,rgba(255,255,255,.02) 1px,transparent 1px);background-size:3px 3px}.app-header{width:100%;display:flex;justify-content:space-between;align-items:center;padding-bottom:1rem;border-bottom:1px dashed var(--border)}.app-header h1{font-family:Playfair Display,Lora,serif;font-size:1.8rem;color:var(--primary-dark);margin:0}.cloud-status{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--text-muted)}.start-screen,.drawing-page,.guessing-page,.result-screen{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%;text-align:center}.title{font-family:Playfair Display,Lora,serif;font-size:2.5rem;color:var(--primary);margin-bottom:.5rem}.description,.summary-text{font-size:1.1rem;color:var(--text-muted);line-height:1.6}.action-button{background-color:var(--primary);color:var(--surface);border:none;border-radius:var(--radius);padding:.8rem 1.5rem;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease;box-shadow:var(--shadow)}.action-button:hover{background-color:var(--primary-dark);box-shadow:0 4px 6px #0000001a}.action-button.secondary{background-color:var(--surface);color:var(--primary);border:1px solid var(--primary)}.action-button.secondary:hover{background-color:var(--primary-dark);color:var(--surface);border-color:var(--primary-dark)}.high-score-display{display:flex;align-items:center;gap:.5rem;font-size:1.2rem;color:var(--text);margin-top:1rem}.star-icon{color:var(--warning)}.game-info{width:100%;display:flex;justify-content:space-between;font-size:1rem;color:var(--text-muted);margin-bottom:1rem}.canvas-container{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}.drawing-canvas{border:2px solid var(--border);border-radius:var(--radius);background-color:var(--surface);touch-action:none;box-shadow:var(--shadow);width:300px;height:300px}.drawing-tools{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;width:100%;max-width:400px}.tool-group{display:flex;align-items:center;gap:.5rem;background-color:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.5rem 1rem;box-shadow:var(--shadow)}.tool-button{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:.5rem;border-radius:8px;transition:background-color .2s ease,color .2s ease}.tool-button:hover{background-color:var(--border);color:var(--primary)}.tool-button.active{background-color:var(--primary);color:var(--surface)}.color-picker{display:flex;align-items:center;gap:.5rem}.palette-icon{color:var(--text-muted)}.color-swatch{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .2s ease,border-color .2s ease}.color-swatch:hover{transform:scale(1.1)}.brush-size-slider{display:flex;align-items:center;gap:.5rem}.brush-size-slider .slider{width:100px;height:4px;background:var(--border);border-radius:2px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.brush-size-slider .slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--primary);cursor:pointer;box-shadow:var(--shadow)}.brush-size-slider .slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--primary);cursor:pointer;box-shadow:var(--shadow)}.spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.image-comparison{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;margin-top:1rem}.drawing-card{background-color:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem;text-align:center;width:300px;display:flex;flex-direction:column;align-items:center;gap:.8rem;position:relative}.drawing-card h3{font-family:Playfair Display,Lora,serif;color:var(--primary-dark);font-size:1.2rem;margin:0}.comparison-image{width:250px;height:250px;object-fit:contain;border:1px solid var(--border);border-radius:var(--radius);background-color:#f8f8f8}.beautified-card:before{content:"✨ AI 魔法 ✨";position:absolute;top:-10px;left:50%;transform:translate(-50%);background-color:var(--accent);color:var(--surface);padding:.3rem .8rem;border-radius:var(--radius);font-size:.8rem;font-weight:700;white-space:nowrap}.loading-placeholder{width:250px;height:250px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;color:var(--text-muted);font-size:1rem;background-color:#f8f8f8;border-radius:var(--radius);border:1px dashed var(--border)}.fallback-text{width:250px;height:250px;display:flex;justify-content:center;align-items:center;text-align:center;color:var(--danger);font-size:1rem;background-color:#fef0f0;border-radius:var(--radius);border:1px dashed var(--danger);padding:1rem}.guess-options{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.5rem}.feedback{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:1.5rem 2.5rem;border-radius:var(--radius);font-size:1.8rem;font-weight:700;display:flex;align-items:center;gap:.8rem;box-shadow:0 8px 16px #0003;z-index:10}.feedback.correct{background-color:var(--success);color:var(--surface)}.feedback.incorrect{background-color:var(--danger);color:var(--surface)}.result-screen h2{color:var(--primary);font-family:Playfair Display,Lora,serif;font-size:2.2rem}.history-list{width:100%;max-width:400px;margin-top:1.5rem;background-color:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow);text-align:left}.history-list h3{font-family:Playfair Display,Lora,serif;color:var(--text);font-size:1.3rem;margin-top:0;margin-bottom:1rem;border-bottom:1px dashed var(--border);padding-bottom:.5rem}.history-item{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0;border-bottom:1px dotted var(--border);font-size:.95rem;color:var(--text-muted)}.history-item:last-child{border-bottom:none}.history-item.correct{color:var(--success)}.history-item.incorrect{color:var(--danger)}.toast-message{position:fixed;bottom:20px;background-color:var(--text);color:var(--surface);padding:.8rem 1.5rem;border-radius:var(--radius);box-shadow:0 4px 12px #00000026;font-size:.9rem;z-index:1000;display:flex;align-items:center;gap:.5rem}@media (max-width: 768px){.app-container{padding:1rem;gap:1rem}.app-header h1{font-size:1.5rem}.title{font-size:2rem}.description,.summary-text{font-size:1rem}.drawing-canvas{width:250px;height:250px}.drawing-tools{flex-direction:column;align-items:center}.tool-group{width:100%;justify-content:center}.image-comparison{flex-direction:column;gap:1rem}.drawing-card{width:100%;max-width:300px}.comparison-image,.loading-placeholder,.fallback-text{width:200px;height:200px}.feedback{font-size:1.5rem;padding:1rem 2rem}}@media (max-width: 480px){.app-header{flex-direction:column;gap:.5rem}.app-header h1{font-size:1.3rem}.cloud-status{font-size:.8rem}.title{font-size:1.8rem}.action-button{padding:.6rem 1rem;font-size:1rem}.drawing-canvas{width:200px;height:200px}.comparison-image,.loading-placeholder,.fallback-text{width:150px;height:150px}.history-list{padding:.8rem}.history-item{font-size:.85rem}}