.spelling-page{max-width:1000px;margin:0 auto;padding-bottom:20px}.game-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}.back-link{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;font-weight:800;font-size:.95rem;color:#374151;background:#fff;border:3px solid #111;border-radius:12px;text-decoration:none;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.1),3px 3px 0 #000;transition:all .14s ease}.back-link:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.15),4px 4px 0 #000;background:#f3f4f6}.spelling-menu{background:linear-gradient(135deg,#fef3c7,#fff);border:3px solid #111;border-radius:22px;padding:28px;box-shadow:0 12px 32px rgba(0,0,0,.15),8px 8px 0 #000}.menu-header{display:flex;gap:24px;align-items:center;margin-bottom:28px;padding-bottom:20px;border-bottom:3px dashed #f59e0b}.menu-bot{width:100px;height:100px;flex-shrink:0}.menu-bot img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(3px 3px 6px rgba(0,0,0,.2))}.menu-header h1{margin:0 0 6px;font-size:clamp(28px,5vw,40px);font-weight:900;color:#111}.menu-header p{margin:0;font-size:1.05rem;font-weight:600;color:#6b7280}.spelling-menu h2{margin:24px 0 16px;font-size:1.3rem;font-weight:900;color:#111}.menu-options{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:20px}.word-source-selector{display:flex;align-items:center;gap:12px;padding:16px 20px;background:#fff;border:2px solid #e5e7eb;border-radius:14px}.word-source-selector label{font-weight:800;font-size:.95rem;color:#374151;white-space:nowrap}.word-source-dropdown{flex:1 1;padding:10px 14px;font-size:1rem;font-weight:700;color:#111;background:#f9fafb;border:2px solid #d1d5db;border-radius:10px;cursor:pointer;outline:none;transition:all .15s ease}.word-source-dropdown:hover{border-color:#f59e0b}.word-source-dropdown:focus{border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.2)}.color-selector{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border:2px solid #e5e7eb;border-radius:14px}.color-selector label{font-weight:800;font-size:.95rem;color:#374151}.color-buttons{display:flex;gap:8px}.color-btn{width:32px;height:32px;border:3px solid #111;border-radius:50%;cursor:pointer;transition:all .15s ease}.color-btn:hover{transform:scale(1.15)}.color-btn.active{box-shadow:0 0 0 4px rgba(0,0,0,.2);transform:scale(1.1)}.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));grid-gap:16px;gap:16px}.mode-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 16px;background:#fff;border:3px solid #111;border-radius:16px;cursor:pointer;transition:all .2s ease;text-align:center;box-shadow:0 6px 16px rgba(0,0,0,.1),4px 4px 0 #000}.mode-btn:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 24px rgba(0,0,0,.15),6px 6px 0 #000}.mode-bot{width:80px;height:80px;display:flex;align-items:center;justify-content:center}.mode-bot img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.15))}.mode-bot-name{font-size:.75rem;font-weight:800;text-transform:uppercase;color:#9ca3af;letter-spacing:.5px}.mode-name{font-weight:900;font-size:1.1rem;color:#111}.mode-desc{font-size:.8rem;font-weight:600;color:#6b7280;line-height:1.3}.mode-unscramble{background:linear-gradient(135deg,#dbeafe,#fff)}.mode-missing{background:linear-gradient(135deg,#dcfce7,#fff)}.mode-bee{background:linear-gradient(135deg,#fef3c7,#fff)}.mode-flash{background:linear-gradient(135deg,#fce7f3,#fff)}.game-container{background:linear-gradient(135deg,#f8fafc,#fff);border:3px solid #111;border-radius:22px;padding:24px;box-shadow:0 12px 32px rgba(0,0,0,.15),8px 8px 0 #000}.game-controls{justify-content:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}.game-controls,.skip-word-btn{display:flex;align-items:center}.skip-word-btn{gap:6px;padding:8px 16px;font-weight:700;font-size:.9rem;color:#374151;background:#fff;border:2px solid #111;border-radius:10px;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.1),2px 2px 0 #000;transition:all .15s ease}.skip-word-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 12px rgba(0,0,0,.15),3px 3px 0 #000;background:#f3f4f6}.skip-word-btn:disabled{opacity:.5;cursor:not-allowed}.game-word-dropdown{padding:8px 14px;font-size:.9rem;font-weight:700;color:#111;background:#fff;border:2px solid #111;border-radius:10px;cursor:pointer;outline:none;transition:all .15s ease;box-shadow:0 3px 8px rgba(0,0,0,.1),2px 2px 0 #000}.game-word-dropdown:hover{transform:translateY(-2px);box-shadow:0 5px 12px rgba(0,0,0,.15),3px 3px 0 #000}.game-word-dropdown:focus{box-shadow:0 3px 8px rgba(0,0,0,.1),2px 2px 0 #000,0 0 0 3px rgba(245,158,11,.2)}.game-layout{display:flex;flex-direction:column;gap:20px}.game-header-bar{display:flex;justify-content:space-between;align-items:center;gap:16px}.score-box,.streak-box{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 20px;background:#fff;border:3px solid #111;border-radius:14px;box-shadow:0 4px 12px rgba(0,0,0,.1),3px 3px 0 #000;min-width:90px}.score-value,.streak-value{font-size:1.8rem;font-weight:900;color:#111}.score-label,.streak-label{font-size:.75rem;font-weight:700;text-transform:uppercase;color:#6b7280}.game-main{display:flex;gap:24px;align-items:flex-start}.game-bot-side{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:12px;width:200px}.game-bot-side img{width:180px;height:200px;object-fit:contain;filter:drop-shadow(4px 4px 12px rgba(0,0,0,.25));transition:all .3s ease}.game-bot-side.celebrating img{animation:bot-celebrate .6s ease-in-out infinite;filter:drop-shadow(4px 4px 12px rgba(34,197,94,.5))}@keyframes bot-celebrate{0%,to{transform:translateY(0) scale(1)}25%{transform:translateY(-15px) rotate(-5deg) scale(1.1)}50%{transform:translateY(-20px) scale(1.15)}75%{transform:translateY(-15px) rotate(5deg) scale(1.1)}}.bot-name{font-weight:800;font-size:.9rem;color:#6b7280;text-transform:uppercase;letter-spacing:1px}.game-content-area{flex:1 1;display:flex;flex-direction:column;align-items:center;text-align:center}.game-instruction{margin:0 0 20px;font-size:1.1rem;font-weight:700;color:#4b5563}.placed-tiles-area,.word-display-big{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:24px;min-height:100px;padding:16px;background:hsla(0,0%,100%,.7);border-radius:16px;border:2px dashed #d1d5db}.breaker-slots-area.correct,.placed-tiles-area.correct,.word-display-big.correct{background:rgba(34,197,94,.15);border-color:#22c55e}.breaker-slots-area.correct .breaker-slot,.placed-tiles-area.correct .letter-tile-big,.word-display-big.correct .letter-tile-big{animation:bounce-big .6s ease}.breaker-slots-area.incorrect,.placed-tiles-area.incorrect,.word-display-big.incorrect{background:rgba(239,68,68,.15);border-color:#ef4444}.breaker-slots-area.incorrect .breaker-slot,.placed-tiles-area.incorrect .letter-tile-big,.word-display-big.incorrect .letter-tile-big{animation:shake-big .5s ease}.available-tiles-area{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:16px}.letter-tile-big{display:inline-flex;align-items:center;justify-content:center;width:65px;height:80px;font-size:2.5rem;font-weight:900;text-transform:uppercase;background:#fff;border:4px solid #111;border-radius:14px;box-shadow:0 6px 14px rgba(0,0,0,.12),4px 4px 0 #000;transition:all .18s ease;cursor:pointer}.letter-tile-big.placed{background:#dcfce7}.letter-tile-big.locked{background:#dcfce7;border-color:#22c55e!important;cursor:not-allowed;animation:lock-in .4s ease-out}@keyframes lock-in{0%{transform:scale(1)}50%{transform:scale(1.15);background:#86efac}to{transform:scale(1);background:#dcfce7}}.letter-tile-big.shaking-out{background:#fee2e2;border-color:#ef4444!important;animation:shake-and-fly-out .8s ease-out forwards}@keyframes shake-and-fly-out{0%{transform:translateX(0) scale(1);opacity:1}20%{transform:translateX(-15px) scale(1)}40%{transform:translateX(15px) scale(1)}60%{transform:translateX(-10px) translateY(-20px) scale(.9)}80%{transform:translateX(10px) translateY(-40px) scale(.8);opacity:.7}to{transform:translateY(60px) scale(.5);opacity:0}}.letter-tile-big.empty{background:#f3f4f6;border-style:dashed;color:#9ca3af;cursor:default}.letter-tile-big.available:hover:not(:disabled){transform:translateY(-6px) scale(1.05);box-shadow:0 12px 24px rgba(0,0,0,.18),6px 6px 0 #000;background:#dbeafe}.letter-tile-big:disabled{opacity:.4;cursor:not-allowed}.letter-tile-big.mystery{background:#fef3c7;color:#f59e0b;animation:pulse-glow 1.5s ease-in-out infinite}.letter-tile-big.filled-letter{background:#dcfce7;color:#22c55e;animation:letter-pop-in .5s ease-out;transform-origin:center}@keyframes letter-pop-in{0%{transform:scale(0) rotate(-180deg);opacity:0}50%{transform:scale(1.3) rotate(15deg)}75%{transform:scale(.9) rotate(-5deg)}to{transform:scale(1) rotate(0deg);opacity:1}}@keyframes pulse-glow{0%,to{box-shadow:0 6px 14px rgba(0,0,0,.12),4px 4px 0 #000}50%{box-shadow:0 6px 14px rgba(245,158,11,.5),4px 4px 0 #000,0 0 20px rgba(245,158,11,.3)}}@keyframes bounce-big{0%,to{transform:translateY(0)}30%{transform:translateY(-20px)}50%{transform:translateY(-12px)}70%{transform:translateY(-16px)}}@keyframes shake-big{0%,to{transform:translateX(0)}20%{transform:translateX(-12px)}40%{transform:translateX(12px)}60%{transform:translateX(-8px)}80%{transform:translateX(8px)}}.letter-options-big{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:20px}.letter-option-big{width:75px;height:90px;font-size:2.2rem;font-weight:900;text-transform:uppercase;background:#fff;border:4px solid #111;border-radius:14px;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.14),5px 5px 0 #000;transition:all .18s ease}.letter-option-big:hover:not(:disabled){transform:translateY(-6px) scale(1.05);box-shadow:0 14px 28px rgba(0,0,0,.18),7px 7px 0 #000;background:#dbeafe}.letter-option-big:disabled{opacity:.4;cursor:not-allowed}.listen-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:28px 40px;background:linear-gradient(135deg,#fef3c7,#fff);border:4px solid #111;border-radius:20px;cursor:pointer;font-weight:800;font-size:1.2rem;color:#374151;transition:all .2s ease;box-shadow:0 8px 20px rgba(0,0,0,.12),5px 5px 0 #000;margin-bottom:20px}.listen-btn:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 12px 28px rgba(0,0,0,.15),7px 7px 0 #000}.listen-btn:active{transform:translateY(-2px) scale(1.01)}.listen-icon{font-size:4rem;line-height:1;animation:pulse-speaker 2s ease-in-out infinite}@keyframes pulse-speaker{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.bee-input-area,.flash-input-area{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:400px;animation:fade-in-up .4s ease-out}@keyframes fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.word-input-big{width:100%;padding:18px 24px;font-size:1.8rem;font-weight:800;text-align:center;text-transform:uppercase;letter-spacing:4px;background:#fff;border:4px solid #111;border-radius:16px;box-shadow:0 6px 16px rgba(0,0,0,.1),4px 4px 0 #000;outline:none;transition:all .2s ease}.word-input-big:focus{box-shadow:0 8px 20px rgba(0,0,0,.15),4px 4px 0 #000,0 0 0 4px rgba(245,158,11,.3)}.word-input-big::placeholder{color:#9ca3af;font-weight:600;text-transform:none;letter-spacing:0}.submit-btn-big{width:100%;padding:16px 24px;font-size:1.2rem;font-weight:900;color:#fff;background:#f59e0b;border:4px solid #111;border-radius:14px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.12),4px 4px 0 #000;transition:all .2s ease}.submit-btn-big:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.15),5px 5px 0 #000}.submit-btn-big:disabled{opacity:.5;cursor:not-allowed}.flash-word-display{display:flex;flex-direction:column;align-items:center;gap:20px;padding:40px;background:hsla(0,0%,100%,.9);border:4px solid #111;border-radius:24px;box-shadow:0 12px 32px rgba(0,0,0,.15),6px 6px 0 #000;animation:flash-pulse 1s ease-in-out infinite}@keyframes flash-pulse{0%,to{box-shadow:0 12px 32px rgba(0,0,0,.15),6px 6px 0 #000}50%{box-shadow:0 12px 32px rgba(236,72,153,.4),6px 6px 0 #000,0 0 40px rgba(236,72,153,.3)}}.flash-word{font-size:4rem;font-weight:900;letter-spacing:8px;text-transform:uppercase;text-shadow:3px 3px 0 #111}.flash-countdown{display:flex;align-items:center;justify-content:center;width:80px;height:80px;background:#fff;border:4px solid #111;border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.1),3px 3px 0 #000}.countdown-number{font-size:2.5rem;font-weight:900;animation:countdown-pulse 1s ease-in-out infinite}@keyframes countdown-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.correct-answer{margin-top:20px;padding:16px 24px;background:#fef2f2;border:3px solid #fecaca;border-radius:12px;font-size:1.1rem;font-weight:600;color:#991b1b;animation:fade-in .4s ease}.correct-answer strong{color:#111;font-weight:900;text-transform:uppercase;letter-spacing:2px}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000;overflow:hidden}.confetti-piece{position:absolute;top:-20px;width:12px;height:12px;border-radius:2px;animation:confetti-fall 3s ease-out forwards}@keyframes confetti-fall{0%{transform:translateY(0) rotate(0deg) scale(1);opacity:1}to{transform:translateY(100vh) rotate(2turn) scale(.3);opacity:0}}.confetti-piece:nth-child(2n){animation-duration:2.5s;width:8px;height:20px;border-radius:4px}.confetti-piece:nth-child(3n){animation-duration:3.5s;width:16px;height:8px}.word-reveal{margin:20px 0;animation:reveal-pop .5s ease-out}.reveal-word{font-size:3rem;font-weight:900;text-shadow:3px 3px 0 #111,0 0 20px currentColor;letter-spacing:6px}@keyframes reveal-pop{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.game-footer{display:flex;align-items:center;gap:12px;padding:16px;margin-top:20px;background:hsla(0,0%,100%,.9);border-radius:14px;border:2px solid #e5e7eb;flex-wrap:wrap;justify-content:center}.footer-label{font-weight:800;font-size:.9rem;color:#6b7280}.footer-game-btn{display:flex;align-items:center;gap:8px;padding:8px 14px;background:#fff;border:2px solid #111;border-radius:10px;cursor:pointer;font-weight:700;font-size:.85rem;color:#374151;transition:all .15s ease;box-shadow:0 3px 8px rgba(0,0,0,.1),2px 2px 0 #000}.footer-game-btn:hover{transform:translateY(-2px);box-shadow:0 5px 12px rgba(0,0,0,.15),3px 3px 0 #000;background:#f3f4f6}.footer-bot{width:28px;height:28px;object-fit:contain}@media (max-width:768px){.game-main{flex-direction:column;align-items:center}.game-bot-side{width:100%;flex-direction:row;justify-content:center;gap:16px}.game-bot-side img{width:120px;height:140px}.letter-tile-big{width:55px;height:68px;font-size:2rem}.letter-option-big{width:60px;height:72px;font-size:1.8rem}.listen-btn{padding:20px 30px}.listen-icon{font-size:3rem}.word-input-big{font-size:1.4rem;padding:14px 18px;letter-spacing:3px}.flash-word{font-size:3rem;letter-spacing:6px}.flash-countdown{width:60px;height:60px}.countdown-number{font-size:2rem}.reveal-word{font-size:2.2rem;letter-spacing:4px}.game-header-bar{flex-wrap:wrap;justify-content:center}.score-box,.streak-box{min-width:80px;padding:10px 16px}.score-value,.streak-value{font-size:1.4rem}}@media (max-width:480px){.game-container,.spelling-menu{padding:16px}.menu-header{flex-direction:column;text-align:center}.menu-options{flex-direction:column;align-items:stretch}.letter-tile-big{width:48px;height:58px;font-size:1.7rem;margin:3px}.letter-option-big{width:52px;height:62px;font-size:1.5rem}.listen-btn{padding:16px 24px;font-size:1rem}.listen-icon{font-size:2.5rem}.word-input-big{font-size:1.2rem;padding:12px 14px;letter-spacing:2px}.submit-btn-big{font-size:1rem;padding:12px 18px}.flash-word{font-size:2.2rem;letter-spacing:4px}.flash-word-display{padding:24px}.flash-countdown{width:50px;height:50px}.countdown-number{font-size:1.6rem}.correct-answer{padding:12px 16px;font-size:1rem}.game-footer{gap:8px}.footer-game-btn{padding:6px 10px;font-size:.75rem}.footer-bot{width:22px;height:22px}}