#game-container{max-width:600px;margin:0 auto;padding:0 var(--bl-space-3, 12px);user-select:none;-webkit-user-select:none}.screen{min-height:60vh;display:flex;flex-direction:column;align-items:center}.screen[hidden]{display:none!important}.title-header{text-align:center;margin-bottom:var(--bl-space-4, 16px)}.game-title{font-family:var(--bl-font-brand, "Artifika", serif);font-size:2.4rem;color:var(--bl-color-primary, #A85A3A);margin:0;line-height:1.2}.game-subtitle{font-size:1.15rem;color:var(--bl-color-text-secondary, #55524E);margin:var(--bl-space-2, 8px) 0 0}.title-illustration{width:100%;max-width:400px;margin:var(--bl-space-4, 16px) 0;border-radius:var(--bl-radius-md, 8px);overflow:hidden}.title-image{width:100%;display:block}.game-story{text-align:center;font-size:1rem;color:var(--bl-color-text-primary, #2B2926);max-width:480px;line-height:1.6;margin:0 0 var(--bl-space-4, 16px)}.best-score{font-size:.9rem;color:var(--bl-color-accent, #B89530);font-weight:600;margin-bottom:var(--bl-space-3, 12px)}.btn{border:none;border-radius:var(--bl-radius-md, 8px);padding:12px 32px;font-size:1.1rem;font-family:var(--bl-font-body, "Atkinson Hyperlegible", sans-serif);cursor:pointer;transition:transform .15s,box-shadow .15s}.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.btn:active{transform:translateY(0)}.btn-primary{background:var(--bl-color-primary, #A85A3A);color:#fff}.btn-secondary{background:var(--bl-color-surface, #F2EDE6);color:var(--bl-color-text-primary, #2B2926);border:2px solid var(--bl-color-border, #D5D0C8)}.settings-bar{display:flex;align-items:center;gap:12px;margin-top:var(--bl-space-4, 16px)}#lang-select{padding:6px 12px;border-radius:var(--bl-radius-sm, 4px);border:1px solid var(--bl-color-border, #D5D0C8);font-family:var(--bl-font-body, sans-serif);font-size:.9rem;background:var(--bl-color-surface-elevated, #fff)}.sound-btn{background:none;border:1px solid var(--bl-color-border, #D5D0C8);border-radius:var(--bl-radius-sm, 4px);padding:6px 10px;font-size:1.2rem;cursor:pointer;line-height:1}.progress-bar{width:100%;margin-bottom:var(--bl-space-3, 12px)}.progress-text{font-size:.85rem;color:var(--bl-color-text-muted, #8E8B86);display:block;text-align:center;margin-bottom:4px}.progress-track{height:8px;background:var(--bl-color-border-light, #E8E1D8);border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:var(--bl-color-accent, #B89530);border-radius:4px;transition:width .4s ease;width:0}.tutorial-banner{background:var(--bl-color-surface-accent, #F5F0E8);border-left:4px solid var(--bl-color-accent, #B89530);padding:10px 16px;border-radius:0 var(--bl-radius-sm, 4px) var(--bl-radius-sm, 4px) 0;font-size:.9rem;color:var(--bl-color-text-primary, #2B2926);width:100%;margin-bottom:var(--bl-space-3, 12px);line-height:1.5}.challenge-area{text-align:center;margin-bottom:var(--bl-space-4, 16px);width:100%}.challenge-text{font-size:1.2rem;font-weight:600;color:var(--bl-color-text-primary, #2B2926);margin:0 0 var(--bl-space-3, 12px)}.challenge-animal{display:flex;flex-direction:column;align-items:center;gap:4px}.challenge-animal-image img{max-width:240px;max-height:240px;border-radius:var(--bl-radius-md, 8px)}.drop-zone{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:var(--bl-space-4, 16px);width:100%}.drop-slot{width:120px;height:110px;border:3px dashed var(--bl-color-border, #D5D0C8);border-radius:var(--bl-radius-md, 8px);display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bl-color-surface-elevated, #fff);transition:border-color .2s,background .2s,transform .2s;cursor:pointer;position:relative}.drop-slot .slot-hint{font-size:.8rem;color:var(--bl-color-text-muted, #8E8B86);text-align:center;padding:8px}.drop-slot.drag-over{border-color:var(--bl-color-accent, #B89530);background:#b8953014;transform:scale(1.05)}.drop-slot.filled{border-style:solid;border-color:var(--bl-color-border, #D5D0C8)}.drop-slot.correct{border-color:#4caf50;background:#4caf5014}.drop-slot.wrong{border-color:var(--bl-color-error, #C53B4D);background:var(--bl-color-error-light, #FAF4F5);animation:shake .4s ease}.compound-operator{font-size:1.5rem;font-weight:700;color:var(--bl-color-text-muted, #8E8B86)}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.symbol-pool{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%;margin-bottom:var(--bl-space-6, 24px)}.symbol-card{width:110px;background:var(--bl-color-surface, #F2EDE6);border:2px solid var(--bl-color-border, #D5D0C8);border-radius:var(--bl-radius-md, 8px);padding:10px 8px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:grab;transition:transform .15s,box-shadow .15s,opacity .2s;touch-action:none}.symbol-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.symbol-card:active,.symbol-card.dragging{cursor:grabbing;opacity:.5;transform:scale(.95)}.symbol-card.selected{border-color:var(--bl-color-accent, #B89530);box-shadow:0 0 0 3px #b8953040}.symbol-card.used{opacity:.35;pointer-events:none}.symbol-card .symbol-svg{display:flex;justify-content:center;align-items:center;min-height:56px}.symbol-card .symbol-label{font-size:.8rem;font-weight:600;color:var(--bl-color-text-secondary, #55524E);text-align:center;line-height:1.2}:global(.touch-clone){position:fixed;z-index:9999;pointer-events:none;opacity:.85;transform:rotate(3deg) scale(1.1);box-shadow:0 8px 24px #0003}.result-overlay-backdrop{display:none;position:fixed;inset:0;background:#0006;z-index:100;justify-content:center;align-items:center;padding:1rem;overflow-y:auto}.result-overlay-backdrop.visible{display:flex}.result-area{background:var(--bl-color-surface, #F2EDE6);border-radius:var(--bl-radius-lg, 16px);padding:1.5rem;max-width:420px;width:100%;max-height:90vh;overflow-y:auto;text-align:center;animation:resultPop .4s cubic-bezier(.34,1.56,.64,1);position:relative}@keyframes resultPop{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.result-correct{border:3px solid #4CAF50}.result-reversed{border:3px solid #FF9800}.result-wrong{border:3px solid var(--bl-color-error, #C53B4D)}.result-celebration,.result-sad{font-size:2.5rem;margin-bottom:8px}.result-title{margin:0 0 8px;font-size:1.3rem}.result-house-image img,.result-generic-house img{max-width:280px;max-height:220px;border-radius:var(--bl-radius-md, 8px);margin-bottom:12px}.result-compound{margin:12px 0}.result-bliss{display:flex;justify-content:center;margin-bottom:4px}.result-word{font-size:1.3rem;font-weight:700;color:var(--bl-color-primary, #A85A3A);font-family:var(--bl-font-brand, "Artifika", serif)}.result-message{font-size:.95rem;color:var(--bl-color-text-primary, #2B2926);line-height:1.5;margin:8px 0 16px}.confetti-container{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}.confetti-piece{position:absolute;width:10px;height:10px;top:-10px;animation:confettiFall 2.5s ease-in forwards}.confetti-piece:nth-child(odd){border-radius:50%}.confetti-piece:nth-child(2n){border-radius:2px}@keyframes confettiFall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(400px) rotate(720deg);opacity:0}}.confetti-piece:nth-child(1){left:10%;animation-delay:0s;background:#ff6b6b}.confetti-piece:nth-child(2){left:20%;animation-delay:.1s;background:#4ecdc4}.confetti-piece:nth-child(3){left:30%;animation-delay:.05s;background:#ffe66d}.confetti-piece:nth-child(4){left:40%;animation-delay:.15s;background:#a78bfa}.confetti-piece:nth-child(5){left:50%;animation-delay:.08s;background:#ff9f43}.confetti-piece:nth-child(6){left:60%;animation-delay:.2s;background:#6bcb77}.confetti-piece:nth-child(7){left:70%;animation-delay:.12s;background:#4d96ff}.confetti-piece:nth-child(8){left:80%;animation-delay:.18s;background:#ff6b6b}.confetti-piece:nth-child(9){left:90%;animation-delay:.03s;background:#ffe66d}.confetti-piece:nth-child(10){left:15%;animation-delay:.22s;background:#4ecdc4}.confetti-piece:nth-child(11){left:45%;animation-delay:.07s;background:#a78bfa}.confetti-piece:nth-child(12){left:75%;animation-delay:.16s;background:#6bcb77}.result-area.result-correct{animation:resultPop .4s cubic-bezier(.34,1.56,.64,1),successBounce .6s ease .4s}@keyframes successBounce{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.celebration-icon{display:inline-block;font-size:3rem;animation:starEarn .8s ease}@keyframes starEarn{0%{transform:scale(0) rotate(-180deg);opacity:0}60%{transform:scale(1.3) rotate(10deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}.symbol-card.selected{outline:3px solid var(--bl-color-accent, #B89530);outline-offset:2px;animation:selectedPulse 1s ease infinite}@keyframes selectedPulse{0%,to{outline-color:var(--bl-color-accent, #B89530)}50%{outline-color:transparent}}.drop-slot.awaiting-drop{border-color:var(--bl-color-accent, #B89530);background:#b8953014;animation:slotPulse 1s ease infinite}@keyframes slotPulse{0%,to{box-shadow:0 0 #b895304d}50%{box-shadow:0 0 0 6px #b8953000}}.end-stars{font-size:3rem;margin:var(--bl-space-4, 16px) 0}.end-title{font-family:var(--bl-font-brand, "Artifika", serif);font-size:2rem;color:var(--bl-color-primary, #A85A3A);margin:0}.end-subtitle{font-size:1.1rem;color:var(--bl-color-text-secondary, #55524E);margin:var(--bl-space-2, 8px) 0}.end-score{font-size:1.2rem;font-weight:600;color:var(--bl-color-text-primary, #2B2926);margin:var(--bl-space-3, 12px) 0 4px}.end-best{font-size:.9rem;color:var(--bl-color-accent, #B89530);margin:0 0 var(--bl-space-4, 16px)}:global(.bliss-fallback){font-family:var(--bl-font-mono, monospace);font-size:.75rem;color:var(--bl-color-text-muted, #8E8B86);background:var(--bl-color-surface, #F2EDE6);padding:2px 6px;border-radius:3px}@media(max-width:480px){.game-title{font-size:1.8rem}.drop-slot{width:100px;height:95px}.symbol-card{width:90px;padding:8px 6px 6px}.symbol-card .symbol-svg{min-height:44px}.challenge-animal-image img{max-width:180px;max-height:180px}}@media(min-width:768px){.drop-slot{width:140px;height:125px}.symbol-card{width:120px}}
