*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body{min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}:root{--bg-chalkboard: #2d4a3e;--bg-card: #f5f0e1;--btn-a: #8b4049;--btn-b: #b8860b;--btn-c: #4a6741;--btn-d: #4a5568;--accent-wood: #6b4226;--text-light: #f5f0e1;--text-dark: #2c2c2c;--accent-gold: #d4a843;--correct: #4a6741;--incorrect: #8b4049;--bg-surface: #1e3a2f;--muted: #6b7280;--font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;--font-family-display: "Permanent Marker", cursive;--font-family-handwriting: "Patrick Hand", cursive}html{font-size:16px}body{font-family:var(--font-family);color:var(--text-light);background-color:var(--bg-chalkboard)}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-display);line-height:1.2}#root{min-height:100vh;display:flex;flex-direction:column}body{overscroll-behavior:none}button,[role=button]{min-height:48px;min-width:48px;cursor:pointer;touch-action:manipulation}button{background:none;border:none;color:inherit}@media(prefers-reduced-motion:no-preference){*{transition-duration:.2s}}.chalkboard-bg{background-color:var(--bg-chalkboard);background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px),repeating-linear-gradient(45deg,transparent,transparent 2px,rgba(255,255,255,.008) 2px,rgba(255,255,255,.008) 4px),repeating-linear-gradient(-45deg,transparent,transparent 3px,rgba(255,255,255,.006) 3px,rgba(255,255,255,.006) 5px),repeating-linear-gradient(135deg,transparent,transparent 6px,rgba(0,0,0,.03) 6px,rgba(0,0,0,.03) 8px),repeating-linear-gradient(90deg,transparent,transparent 40px,rgba(255,255,255,.012) 40px,rgba(255,255,255,.012) 42px);background-size:60px 60px,60px 60px,6px 6px,8px 8px,12px 12px,82px 82px}.wood-frame{border:12px solid var(--accent-wood);border-image:repeating-linear-gradient(180deg,#5a3520,#6b4226,#8b6914,#6b4226,#5a3520,#7a5230,#6b4226 18px) 12;box-shadow:inset 0 0 20px #0000004d,0 4px 20px #0006,0 0 0 2px #5a352099}.wood-frame-rounded{border:10px solid var(--accent-wood);background-clip:padding-box;position:relative;box-shadow:inset 0 0 16px #0003,0 4px 16px #00000059}.wood-frame-rounded:before{content:"";position:absolute;inset:-10px;border-radius:inherit;background:repeating-linear-gradient(90deg,#5a3520,#6b4226,#8b6914,#6b4226,#5a3520,#7a5230,#6b4226 24px);z-index:-1}.notebook-paper{background-color:var(--bg-card);background-image:linear-gradient(90deg,transparent 52px,rgba(220,80,80,.35) 52px,rgba(220,80,80,.35) 54px,transparent 54px),repeating-linear-gradient(transparent,transparent 27px,rgba(100,140,200,.2) 27px,rgba(100,140,200,.2) 28px),repeating-linear-gradient(120deg,transparent,transparent 3px,rgba(0,0,0,.01) 3px,rgba(0,0,0,.01) 5px);background-size:100% 100%,100% 28px,8px 8px;box-shadow:0 4px 16px #00000040,0 1px 4px #00000026;position:relative}.notebook-paper:after{content:"";position:absolute;bottom:-3px;left:0;right:0;height:6px;background:repeating-linear-gradient(135deg,var(--bg-card) 0px,var(--bg-card) 3px,transparent 3px,transparent 6px);opacity:.7}.tape-left,.tape-right{position:absolute;width:60px;height:22px;background:linear-gradient(180deg,#e1d7afbf,#d2c8a0a6);border-radius:2px;z-index:2;box-shadow:0 1px 3px #00000026,inset 0 1px #ffffff4d;-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px)}.tape-left{top:-10px;left:16px;transform:rotate(-8deg)}.tape-right{top:-10px;right:16px;transform:rotate(6deg)}.btn-3d{position:relative;border:none;border-radius:10px;color:var(--text-light);font-weight:600;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease;box-shadow:0 4px #0000004d,0 6px 12px #0003}.btn-3d:active{transform:translateY(3px);box-shadow:0 1px #0000004d,0 2px 6px #00000026}.btn-3d-a{background:linear-gradient(180deg,#a04d58 0%,var(--btn-a) 40%,#6e3039 100%)}.btn-3d-b{background:linear-gradient(180deg,#d4a020 0%,var(--btn-b) 40%,#8a6508 100%)}.btn-3d-c{background:linear-gradient(180deg,#5c804f 0%,var(--btn-c) 40%,#354e2f 100%)}.btn-3d-d{background:linear-gradient(180deg,#5d6b7d 0%,var(--btn-d) 40%,#353d47 100%)}.btn-gold{background:linear-gradient(180deg,#e8c25a 0%,var(--accent-gold) 40%,#b08830 100%);color:var(--text-dark);font-weight:700;border:none;border-radius:12px;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease;box-shadow:0 4px #00000040,0 6px 16px #00000026}.btn-gold:active{transform:translateY(3px);box-shadow:0 1px #00000040,0 2px 8px #0000001a}.chalk-text{font-family:var(--font-family-display);color:var(--text-light);text-shadow:0 0 4px rgba(245,240,225,.15),0 0 8px rgba(245,240,225,.08),1px 1px 0 rgba(0,0,0,.2);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:.02em}.chalk-text-bright{font-family:var(--font-family-display);color:var(--text-light);text-shadow:0 0 6px rgba(245,240,225,.25),0 0 14px rgba(245,240,225,.1),2px 2px 0 rgba(0,0,0,.25);letter-spacing:.02em}.chalk-text-gold{font-family:var(--font-family-display);color:var(--accent-gold);text-shadow:0 0 6px rgba(212,168,67,.2),0 0 12px rgba(212,168,67,.08),1px 1px 0 rgba(0,0,0,.3);letter-spacing:.02em}.chalk-drawn{opacity:.9;border-color:#f5f0e199}.chalk-circle{border:2px solid rgba(245,240,225,.5);border-radius:50%;box-shadow:1px 0 #f5f0e126,-1px 0 #f5f0e11a,0 1px #f5f0e11f}.chalk-door{border:2px solid rgba(245,240,225,.55);border-radius:3px 3px 0 0;position:relative;box-shadow:1px 0 #f5f0e11a,0 1px #f5f0e114}.chalk-door:before{content:"";position:absolute;top:15%;left:50%;transform:translate(-50%);width:40%;height:25%;border:1.5px solid rgba(245,240,225,.4);border-radius:2px}.chalk-door:after{content:"";position:absolute;top:55%;right:18%;width:5px;height:5px;border:1.5px solid rgba(245,240,225,.45);border-radius:50%}@keyframes chalk-pulse{0%,to{box-shadow:0 0 6px #d4a84366,0 0 12px #d4a84333}50%{box-shadow:0 0 10px #d4a84399,0 0 20px #d4a8434d}}.chalk-pulse{animation:chalk-pulse 2s ease-in-out infinite}@keyframes banner-pop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.05);opacity:1}to{transform:scale(1);opacity:1}}.banner-pop{animation:banner-pop .4s ease-out}@keyframes piece-advance{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.piece-advance{animation:piece-advance .5s ease-in-out}
