.syllable-game-layout{min-height:100vh;font-family:var(--ff-arabic,"Noto Naskh Arabic", serif)}.syllable-game-page{justify-content:center;align-items:flex-start;min-height:100vh;padding:2rem 1rem 4rem;display:flex}.syllable-game-container{width:100%;max-width:600px;margin-inline:auto;position:relative}.level-selector{text-align:center;padding-block:2rem}.level-selector__title{font-family:var(--ff-arabic);color:var(--ink);margin:0;font-size:2.5rem;font-weight:700;line-height:1.4}.level-selector__subtitle{font-family:var(--font-family);color:var(--ink-muted);margin:.25rem 0 2rem;font-size:1rem}.level-selector__grid{grid-template-columns:repeat(2,1fr);gap:1rem;display:grid}.level-card{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;text-align:center;flex-direction:column;align-items:center;gap:.5rem;padding:1.5rem 1rem;transition:all .2s;display:flex}.level-card:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.level-card:active{transform:translateY(0)}.level-card__icon{font-family:var(--ff-arabic);background:var(--primary-tint);width:3.5rem;height:3.5rem;color:var(--primary);border-radius:50%;justify-content:center;align-items:center;font-size:2rem;font-weight:700;display:flex}.level-card__name{font-family:var(--ff-arabic);color:var(--ink);font-size:1.1rem;font-weight:600}.level-card__name-en{font-family:var(--font-family);color:var(--ink-muted);font-size:.8rem}.level-card__desc{font-family:var(--font-family);color:var(--ink-subtle);font-size:.75rem;line-height:1.4}.syllable-game-round{flex-direction:column;gap:1.5rem;display:flex}.syllable-game-round__header{align-items:center;gap:1rem;display:flex}.syllable-game-round__translation{text-align:center;font-family:var(--font-family);color:var(--ink-muted);margin:0;font-size:1rem}.syllable-game-round__drop-area{justify-content:center;align-items:center;min-height:120px;display:flex;position:relative}.syllable-game-round__drop-area--revealing{min-height:160px}.syllable-game-round__actions{justify-content:center;padding-block:1rem;display:flex}.syllable-game-round__next-btn{background:var(--primary);color:var(--on-primary);border-radius:var(--radius-md);font-family:var(--ff-arabic);cursor:pointer;border:none;align-items:center;gap:.5rem;padding:.75rem 2rem;font-size:1.1rem;font-weight:600;transition:all .2s;display:inline-flex}.syllable-game-round__next-btn:hover{background:var(--accent-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.syllable-game-round__next-icon{width:1.25rem;height:1.25rem}.drop-zone{flex-direction:row;justify-content:center;gap:.75rem;padding:1rem;display:flex}.drop-slot{border:2px dashed var(--border-strong);border-radius:var(--radius-md);background:var(--surface);justify-content:center;align-items:center;min-width:72px;min-height:72px;transition:all .2s;display:flex;box-shadow:inset 0 2px 4px #0000000a}.drop-slot--over{border-color:var(--primary);background:var(--primary-tint);box-shadow:0 0 0 3px var(--primary-alpha), inset 0 2px 4px #0000000a}.drop-slot--filled{border-style:solid;border-color:var(--primary);background:var(--primary-tint)}.drop-slot__text{font-family:var(--ff-arabic);color:var(--ink);font-size:1.75rem;font-weight:600;line-height:1.6}.drop-slot__text--snap{animation:.2s ease-out snapBounce}.drop-slot__placeholder{font-family:var(--font-family);color:var(--ink-subtle);opacity:.5;font-size:.875rem}.syllable-tile{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-md);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;min-width:72px;min-height:56px;padding:.5rem 1rem;transition:transform .15s,box-shadow .15s,opacity .3s;display:flex}.syllable-tile:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.syllable-tile:active{cursor:grabbing}.syllable-tile--dragging{opacity:.5}.syllable-tile--placed{opacity:0;pointer-events:none}.syllable-tile--overlay{box-shadow:var(--shadow-lg);border-color:var(--primary);cursor:grabbing;z-index:var(--z-modal)}.syllable-tile--shake{border-color:var(--danger);background:var(--danger-bg);animation:.3s shake}.syllable-tile__text{font-family:var(--ff-arabic);color:var(--ink);font-size:1.75rem;font-weight:600;line-height:1.6}.tile-tray{background:var(--panel-bg);border-radius:var(--radius-lg);border:1px solid var(--border);flex-direction:column;align-items:center;gap:1rem;padding:1.5rem;display:flex}.tile-tray__instruction{font-family:var(--ff-arabic);color:var(--ink-muted);margin:0;font-size:.9rem}.tile-tray__tiles{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}.connected-reveal{flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:2rem;display:flex;position:relative}.connected-reveal__word{opacity:0;flex-direction:column;align-items:center;gap:.5rem;transition:opacity .4s,transform .4s;display:flex;transform:scale(.9)}.connected-reveal__word--visible{opacity:1;transform:scale(1)}.connected-reveal__arabic{font-family:var(--ff-arabic);color:var(--ink);font-size:3rem;font-weight:700;line-height:1.6}.connected-reveal__translation{font-family:var(--font-family);color:var(--ink-muted);font-size:1rem}.connected-reveal__success{animation:.6s forwards shimmer}.connected-reveal__check{width:2rem;height:2rem;color:var(--success);animation:.3s fadeInScale}.audio-player-btn{border:2px solid var(--border);background:var(--surface);cursor:pointer;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;transition:all .2s;display:flex}.audio-player-btn:hover:not(:disabled){border-color:var(--primary);background:var(--primary-tint)}.audio-player-btn:disabled{opacity:.5;cursor:not-allowed}.audio-player-btn--error{border-color:var(--danger);opacity:.6}.audio-player-btn__icon{width:20px;height:20px;color:var(--ink-muted)}.audio-player-btn:hover:not(:disabled) .audio-player-btn__icon{color:var(--primary)}.progress-bar{flex:1;align-items:center;gap:.75rem;display:flex}.progress-bar__track{background:var(--panel-bg);direction:rtl;border-radius:3px;flex:1;height:6px;overflow:hidden}.progress-bar__fill{background:var(--primary);float:right;border-radius:3px;height:100%;transition:width .4s}.progress-bar__label{font-family:var(--font-family);color:var(--ink-subtle);white-space:nowrap;text-align:center;min-width:3rem;font-size:.8rem}.game-summary{text-align:center;padding:2rem 1rem}.game-summary__header{margin-bottom:2rem}.game-summary__trophy{margin-bottom:.5rem;font-size:3rem;display:block}.game-summary__title{font-family:var(--ff-arabic);color:var(--ink);margin:0;font-size:2rem;font-weight:700}.game-summary__subtitle{font-family:var(--font-family);color:var(--ink-muted);margin:.25rem 0 0;font-size:1rem}.game-summary__stats{grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem;display:grid}.game-summary__stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);flex-direction:column;align-items:center;gap:.25rem;padding:1rem;display:flex}.game-summary__stat-value{font-family:var(--font-family);color:var(--primary);font-size:1.75rem;font-weight:700}.game-summary__stat-label{font-family:var(--ff-arabic);color:var(--ink-muted);font-size:.8rem}.game-summary__stat-label-en{font-family:var(--font-family);color:var(--ink-subtle);font-size:.7rem}.game-summary__btn{background:var(--primary);color:var(--on-primary);border-radius:var(--radius-md);font-family:var(--ff-arabic);cursor:pointer;border:none;flex-direction:column;align-items:center;gap:.25rem;padding:.75rem 2.5rem;font-size:1.1rem;font-weight:600;transition:all .2s;display:inline-flex}.game-summary__btn:hover{background:var(--accent-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.game-summary__btn-en{font-family:var(--font-family);opacity:.8;font-size:.75rem}.syllable-game-loading{color:var(--ink-muted);font-family:var(--ff-arabic);flex-direction:column;align-items:center;gap:1rem;padding:4rem 0;display:flex}.syllable-game-loading__spinner{border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;width:32px;height:32px;animation:.6s linear infinite spin}.syllable-game-error{text-align:center;color:var(--ink-muted);font-family:var(--ff-arabic);padding:4rem 1rem}.syllable-game-error__en{font-family:var(--font-family);color:var(--ink-subtle);margin-top:.25rem;font-size:.875rem;display:block}.syllable-game-error__btn{background:var(--primary);color:var(--on-primary);border-radius:var(--radius-md);font-family:var(--ff-arabic);cursor:pointer;border:none;margin-top:1rem;padding:.5rem 1.5rem;transition:all .2s}.syllable-game-error__btn:hover{background:var(--accent-hover)}.syllable-game-toast{bottom:1.5rem;background:var(--ink);max-width:400px;color:var(--bg);border-radius:var(--radius-md);text-align:center;font-family:var(--ff-arabic);z-index:var(--z-toast);box-shadow:var(--shadow-lg);margin-inline:auto;padding:.75rem 1rem;font-size:.85rem;animation:.3s toastSlideUp;position:fixed;inset-inline:1rem}.syllable-game-toast__en{font-family:var(--font-family);opacity:.8;margin-top:.25rem;font-size:.75rem;display:block}@keyframes shake{0%,to{transform:translate(0)}15%{transform:translate(-6px)}30%{transform:translate(6px)}45%{transform:translate(-4px)}60%{transform:translate(4px)}75%{transform:translate(-2px)}90%{transform:translate(2px)}}@keyframes snapBounce{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{opacity:0;filter:brightness()}50%{opacity:1;filter:brightness(1.3)}to{opacity:1;filter:brightness()}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes toastSlideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@media (max-width:480px){.syllable-game-page{padding:1rem .75rem 3rem}.level-selector__title{font-size:2rem}.level-selector__grid{grid-template-columns:1fr}.level-card{text-align:start;grid-template-columns:auto 1fr;grid-template-areas:"icon name""icon english""icon desc";gap:1rem;padding:1rem;display:grid}.level-card__icon{flex-shrink:0;grid-area:icon;width:3rem;height:3rem;font-size:1.5rem}.level-card__name{grid-area:name}.level-card__name-en{grid-area:english}.level-card__desc{grid-area:desc}.drop-slot{min-width:56px;min-height:56px}.syllable-tile{min-width:56px;min-height:48px;padding:.375rem .75rem}.syllable-tile__text,.drop-slot__text{font-size:1.5rem}.connected-reveal__arabic{font-size:2.5rem}.game-summary__stats{grid-template-columns:1fr}.tile-tray{padding:1rem}}[data-theme=dark] .level-card{background:var(--surface);border-color:var(--border)}[data-theme=dark] .level-card:hover{border-color:var(--primary);box-shadow:0 4px 6px -1px #0000004d}[data-theme=dark] .syllable-tile{background:var(--surface);border-color:var(--border)}[data-theme=dark] .syllable-tile:hover{border-color:var(--primary)}[data-theme=dark] .syllable-tile--shake{border-color:var(--danger);background:var(--danger-bg)}[data-theme=dark] .syllable-tile--overlay{background:var(--panel-bg);border-color:var(--primary)}[data-theme=dark] .drop-slot{background:var(--surface);border-color:var(--border-strong);box-shadow:inset 0 2px 4px #0003}[data-theme=dark] .drop-slot--over,[data-theme=dark] .drop-slot--filled{border-color:var(--primary);background:var(--primary-tint)}[data-theme=dark] .tile-tray{background:var(--panel-bg);border-color:var(--border)}[data-theme=dark] .audio-player-btn{background:var(--surface);border-color:var(--border)}[data-theme=dark] .audio-player-btn:hover:not(:disabled){background:var(--primary-tint);border-color:var(--primary)}[data-theme=dark] .game-summary__stat{background:var(--surface);border-color:var(--border)}[data-theme=dark] .syllable-game-toast{background:var(--surface);color:var(--ink);border:1px solid var(--border)}