*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}:root{--bg-paper: #faf8f5;--bg-card: #ffffff;--text-primary: #2c2c2c;--text-secondary: #666666;--stroke-color: #2c2c2c;--accent: #4a90d9;--accent-hover: #3a7bc8;--coral: #ff6b6b;--coral-hover: #ff5252;--success: #4caf50;--timer-green: #4caf50;--timer-yellow: #ffc107;--timer-red: #ff6b6b;--grade-a: #4caf50;--grade-b: #8bc34a;--grade-c: #ffc107;--grade-d: #ff9800;--grade-f: #ff6b6b;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--font-serif: Georgia, "Times New Roman", serif;--font-mono: "Courier New", Courier, monospace;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);--shadow-md: 0 3px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 6px 12px rgba(0, 0, 0, .12);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 9999px}html,body{height:100%;font-family:var(--font-serif);background-color:var(--bg-paper);color:var(--text-primary);line-height:1.5}#root{height:100%}.app{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:var(--spacing-md)}.game-container{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center}.start-screen{text-align:center;padding:var(--spacing-xl);max-width:360px}.title{font-size:2.75rem;margin-bottom:var(--spacing-xs);letter-spacing:-.02em;color:var(--text-primary)}.subtitle{color:var(--text-secondary);font-size:1rem;margin-bottom:var(--spacing-lg);font-style:italic}.day-hero{display:flex;flex-direction:column;align-items:center;margin-bottom:var(--spacing-md)}.day-number{font-size:4rem;font-weight:700;line-height:1;color:var(--text-primary)}.day-label{font-size:1rem;text-transform:uppercase;letter-spacing:.15em;color:var(--text-secondary)}.streak-text{color:var(--coral);font-size:1rem;font-weight:700;margin-bottom:var(--spacing-lg)}.difficulty-selector{margin-bottom:var(--spacing-xl);background:var(--bg-card);padding:var(--spacing-md);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.difficulty-selector label{display:block;margin-bottom:var(--spacing-sm);font-size:.875rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.difficulty-options{display:flex;gap:var(--spacing-xs);justify-content:center}.difficulty-btn{background:var(--bg-paper);border:2px solid transparent;padding:var(--spacing-sm) var(--spacing-md);font-family:var(--font-serif);font-size:.875rem;cursor:pointer;transition:all .2s;border-radius:var(--radius-sm)}.difficulty-btn:hover{border-color:var(--accent);color:var(--accent)}.difficulty-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.play-btn{background:var(--coral);color:#fff;border:none;padding:var(--spacing-md) var(--spacing-xl);font-family:var(--font-serif);font-size:1.25rem;font-weight:700;cursor:pointer;border-radius:var(--radius-lg);transition:all .2s;margin-bottom:var(--spacing-xl);box-shadow:var(--shadow-md);min-width:160px}.play-btn:hover{background:var(--coral-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.play-btn:active{transform:translateY(0)}.instructions{color:var(--text-secondary);font-size:.9rem;line-height:1.8;list-style:none;text-align:left;display:inline-block}.instructions li{margin-bottom:var(--spacing-xs);padding-left:var(--spacing-md);position:relative}.instructions li:before{content:"•";color:var(--coral);position:absolute;left:0}.how-scoring-link{display:block;margin-top:var(--spacing-xl);color:var(--text-secondary);font-size:.85rem;text-decoration:none;opacity:.7;transition:opacity .2s}.how-scoring-link:hover{opacity:1;text-decoration:underline}.timer{width:100%;max-width:300px;height:28px;background:#e8e5e0;border-radius:var(--radius-full);position:relative;overflow:hidden;margin:0 auto var(--spacing-lg);box-shadow:inset 0 2px 4px #0000001a}.timer-bar{height:100%;transition:width .1s linear,background-color .3s;border-radius:var(--radius-full)}.timer-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.875rem;font-weight:700;color:var(--text-primary);text-shadow:0 1px 0 rgba(255,255,255,.5)}.timer.urgent .timer-bar{animation:pulse .5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.study-phase{text-align:center;width:100%;padding:var(--spacing-md)}.study-phase h2{margin-bottom:var(--spacing-md);font-size:1.5rem;color:var(--coral)}.shapes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-sm);max-width:100%}@media (max-width: 500px){.shapes-grid{grid-template-columns:1fr;gap:var(--spacing-md)}}.shape-card{background:var(--bg-card);border:3px solid var(--text-primary);padding:var(--spacing-sm);box-shadow:var(--shadow-md);border-radius:var(--radius-sm);transition:transform .2s}.shape-card canvas{display:block;width:100%;height:auto;aspect-ratio:1;max-width:180px;margin:0 auto}.shape-name{display:block;margin-top:var(--spacing-sm);font-weight:700;font-size:.9rem;color:var(--text-primary)}.prompt-phase{text-align:center;padding:var(--spacing-xl) var(--spacing-md);animation:fadeIn .3s ease-out;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px}.prompt-phase h2{font-size:1.5rem;margin-bottom:var(--spacing-md);color:var(--text-secondary)}.target-name{font-size:2.5rem;font-weight:700;color:var(--coral);animation:popIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes popIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.draw-phase{text-align:center;width:100%;padding:var(--spacing-md)}.draw-header{margin-bottom:var(--spacing-md)}.draw-header h2{margin-bottom:var(--spacing-sm);font-size:1.25rem}.draw-header .target-name{font-size:1.75rem}.canvas-container{position:relative;display:inline-block;margin-bottom:var(--spacing-lg);touch-action:none;user-select:none;-webkit-user-select:none}.draw-canvas{display:block;background:var(--bg-card);border:3px solid var(--text-primary);cursor:crosshair;touch-action:none;border-radius:var(--radius-sm);box-shadow:var(--shadow-md)}.draw-canvas.drawing{cursor:crosshair;box-shadow:var(--shadow-lg)}.loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#fffffff2;display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:var(--text-secondary);border-radius:var(--radius-sm)}.loading-overlay span{animation:pulse 1s ease-in-out infinite}.submit-btn{background:var(--success);color:#fff;border:none;padding:var(--spacing-md) var(--spacing-xl);font-family:var(--font-serif);font-size:1.1rem;font-weight:700;cursor:pointer;border-radius:var(--radius-md);transition:all .2s;box-shadow:var(--shadow-sm)}.submit-btn:hover:not(:disabled){background:#43a047;transform:translateY(-2px);box-shadow:var(--shadow-md)}.submit-btn:active:not(:disabled){transform:translateY(0)}.submit-btn:disabled{opacity:.6;cursor:not-allowed}.reveal-phase{text-align:center;padding:var(--spacing-md);animation:fadeIn .3s ease-out}.grade-display{width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto var(--spacing-md);box-shadow:var(--shadow-lg);animation:bounceIn .5s ease-out}@keyframes bounceIn{0%{transform:scale(0)}50%{transform:scale(1.1)}to{transform:scale(1)}}.grade-display .grade{font-size:2.5rem;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.2)}.grade-display.grade-a{background:linear-gradient(135deg,var(--grade-a),#66bb6a)}.grade-display.grade-b{background:linear-gradient(135deg,var(--grade-b),#aed581)}.grade-display.grade-c{background:linear-gradient(135deg,var(--grade-c),#ffca28)}.grade-display.grade-d{background:linear-gradient(135deg,var(--grade-d),#ffb74d)}.grade-display.grade-f{background:linear-gradient(135deg,var(--grade-f),#ef9a9a)}.quip{font-style:italic;color:var(--text-secondary);margin-bottom:var(--spacing-lg);max-width:320px;margin-left:auto;margin-right:auto;font-size:1.1rem;line-height:1.5}.comparison-container{margin-bottom:var(--spacing-lg)}.comparison-canvas{display:block;background:var(--bg-card);border:3px solid var(--text-primary);margin:0 auto;border-radius:var(--radius-sm);box-shadow:var(--shadow-md)}.shape-label{margin-top:var(--spacing-md);font-weight:700;font-size:1.5rem;color:var(--text-primary)}.comparison-hint{font-size:.8rem;color:var(--text-secondary);margin-top:var(--spacing-xs)}.continue-btn{background:var(--accent);color:#fff;border:none;padding:var(--spacing-md) var(--spacing-xl);font-family:var(--font-serif);font-size:1.1rem;font-weight:700;cursor:pointer;border-radius:var(--radius-md);transition:all .2s;box-shadow:var(--shadow-sm)}.continue-btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}.share-card{text-align:center;padding:var(--spacing-lg);animation:fadeIn .3s ease-out}.share-card h2{margin-bottom:var(--spacing-lg);font-size:1.75rem;color:var(--text-primary)}.result-summary{margin-bottom:var(--spacing-lg);background:var(--bg-card);padding:var(--spacing-lg);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.grade-large{font-size:4.5rem;font-weight:700;color:var(--coral);line-height:1}.shape-name-large{font-size:1.5rem;margin-top:var(--spacing-md);color:var(--text-primary)}.streak-display{color:var(--coral);font-weight:700;margin-top:var(--spacing-md);font-size:1.1rem}.share-text{background:var(--bg-card);border:2px dashed #ddd;padding:var(--spacing-md);margin-bottom:var(--spacing-lg);border-radius:var(--radius-md)}.share-text code{font-family:var(--font-mono);font-size:.9rem;white-space:pre-line;color:var(--text-primary)}.share-buttons{display:flex;gap:var(--spacing-md);justify-content:center;margin-bottom:var(--spacing-md)}.share-btn,.download-btn{background:var(--coral);color:#fff;border:none;padding:var(--spacing-md) var(--spacing-xl);font-family:var(--font-serif);font-size:1rem;font-weight:700;cursor:pointer;border-radius:var(--radius-md);transition:all .2s;box-shadow:var(--shadow-sm);min-width:120px}.share-btn:hover,.download-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.share-btn:hover{background:var(--coral-hover)}.download-btn{background:var(--accent)}.download-btn:hover{background:var(--accent-hover)}.share-status{color:var(--success);font-size:1rem;font-weight:700;margin-bottom:var(--spacing-md)}.see-scoring-link{display:block;color:var(--accent);font-size:.9rem;margin-top:var(--spacing-md);text-decoration:none}.see-scoring-link:hover{text-decoration:underline}.comeback-text{color:var(--text-secondary);font-size:1rem;margin-top:var(--spacing-xl);font-style:italic}@media (max-width: 400px){.title{font-size:2rem}.shape-card canvas{width:160px;height:160px}.draw-canvas,.comparison-canvas{width:280px;height:280px}}.app:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");opacity:.03;pointer-events:none;z-index:-1}