*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}[data-theme="dark"]{--bg:#0f0f17;--bg2:#1a1a2e;--surface:#242440;--text:#e8e6f0;--text2:#9896a8;--border:#33314a;--tile-bg:#2a2a45;--tile-border:#44426a;--key-bg:#3d3b5c;--key-text:#e8e6f0;--correct:#22c55e;--correct-dark:#16a34a;--present:#eab308;--present-dark:#ca8a04;--absent:#4b4868;--modal-bg:#1e1e36;--shadow:rgba(0,0,0,0.5);--glow:rgba(108,92,231,0.15)}[data-theme="light"]{--bg:#f7f7fb;--bg2:#ffffff;--surface:#ffffff;--text:#1a1a2e;--text2:#6b7280;--border:#e2e0f0;--tile-bg:#ffffff;--tile-border:#d1cfdf;--key-bg:#e2e0f0;--key-text:#1a1a2e;--correct:#22c55e;--correct-dark:#16a34a;--present:#eab308;--present-dark:#ca8a04;--absent:#9ca3af;--modal-bg:#ffffff;--shadow:rgba(0,0,0,0.1);--glow:rgba(108,92,231,0.08)}body{font-family:'Cairo','Segoe UI',Tahoma,Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100dvh;display:flex;flex-direction:column;overflow-x:hidden}.header{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem;border-bottom:1px solid var(--border);background:var(--bg2)}.logo{font-size:1.6rem;font-weight:800;background:linear-gradient(135deg,#6C5CE7,#a29bfe,#fd79a8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-0.5px}.header-actions{display:flex;gap:0.5rem}.volume-control{position:fixed;top:78px;left:12px;right:auto;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:50;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px 8px;box-shadow:0 4px 16px var(--shadow);direction:ltr}.volume-icon{font-size:1rem;cursor:default;line-height:1;user-select:none}.vol-track{position:relative;width:6px;height:120px;background:var(--border);border-radius:9999px;cursor:pointer;touch-action:none}.vol-range{position:absolute;bottom:0;left:0;width:100%;border-radius:9999px;background:#6C5CE7;pointer-events:none;transition:height 0.05s}.vol-thumb{position:absolute;left:50%;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #6C5CE7;box-shadow:0 1px 4px rgba(0,0,0,0.25);transform:translate(-50%,50%);cursor:grab;touch-action:none;transition:box-shadow 0.15s}.vol-thumb:hover,.vol-thumb:active{box-shadow:0 0 0 4px rgba(108,92,231,0.25)}.vol-pct{font-size:0.7rem;color:var(--text2);user-select:none;font-variant-numeric:tabular-nums}.icon-btn{background:none;border:none;color:var(--text2);cursor:pointer;padding:6px;border-radius:8px;transition:all 0.2s}.icon-btn:hover{color:var(--text);background:var(--glow)}.game{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:1.5rem 0.5rem 0.75rem;max-width:560px;margin:0 auto;width:100%}.board-wrapper{position:relative;display:flex;align-items:center}.hint-btn{position:absolute;left:-52px;top:0;transition-property:transform,opacity,top;transition-duration:0.3s;transition-timing-function:ease;background:none;border:none;cursor:pointer;padding:6px;border-radius:50%;transition:transform 0.3s ease,opacity 0.3s ease;animation:hintPulse 2s ease-in-out infinite;opacity:0.85}.hint-btn:hover{transform:scale(1.15);opacity:1}.hint-btn:active{transform:scale(0.95)}[data-theme="dark"] .hint-icon-dark{display:block}[data-theme="dark"] .hint-icon-light{display:none}[data-theme="light"] .hint-icon-dark{display:none}[data-theme="light"] .hint-icon-light{display:block}@keyframes hintPulse{0%,100%{opacity:0.7}50%{opacity:1}}.board{display:grid;grid-template-rows:repeat(6,1fr);gap:6px;flex-shrink:0;margin-top:30px}.row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.tile{width:66px;height:66px;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;border:2px solid var(--tile-border);border-radius:10px;background:var(--tile-bg);color:var(--text);transition:transform 0.1s,border-color 0.15s;user-select:none}.tile.filled{border-color:var(--text2);animation:pop 0.1s ease-in-out}.tile.correct{background:var(--correct);border-color:var(--correct);color:#fff}.tile.present{background:var(--present);border-color:var(--present);color:#fff}.tile.absent{background:var(--absent);border-color:var(--absent);color:#fff}.tile.reveal{animation:flip 0.5s ease forwards}.tile.bounce{animation:bounce 0.6s ease}.row.shake{animation:shake 0.3s ease}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}@keyframes flip{0%{transform:rotateX(0deg)}45%{transform:rotateX(90deg)}55%{transform:rotateX(90deg)}100%{transform:rotateX(0deg)}}@keyframes bounce{0%,20%{transform:translateY(0)}40%{transform:translateY(-20px)}50%{transform:translateY(5px)}60%{transform:translateY(-10px)}80%{transform:translateY(2px)}100%{transform:translateY(0)}}@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}.keyboard{display:flex;flex-direction:column;gap:6px;width:100%;max-width:560px;margin-bottom:65px}.kb-row{display:flex;gap:4px;justify-content:center}.key{height:58px;min-width:36px;padding:0 8px;border:none;border-radius:8px;background:var(--key-bg);color:var(--key-text);font-size:1.25rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;flex:1;max-width:48px;user-select:none;-webkit-tap-highlight-color:transparent}.key:active{transform:scale(0.93)}.key.wide{max-width:76px;font-size:0.8rem}.key.shift-active{background:#6C5CE7;color:#fff}.key.correct{background:var(--correct);color:#fff}.key.present{background:var(--present);color:#fff}.key.absent{background:var(--absent);color:#fff;opacity:0.45}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn 0.2s ease}.modal-overlay.hidden{display:none}.modal{background:var(--modal-bg);border:1px solid var(--border);border-radius:16px;padding:2rem;max-width:420px;width:90%;max-height:85vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px var(--shadow)}.modal h2{font-size:1.4rem;margin-bottom:1rem;text-align:center}.modal h3{font-size:1rem;margin:1.25rem 0 0.75rem;text-align:center;color:var(--text2)}.modal p{line-height:1.7;margin-bottom:0.5rem;font-size:0.95rem}.modal-close{position:absolute;top:12px;left:12px;background:none;border:none;color:var(--text2);font-size:1.2rem;cursor:pointer;padding:4px 8px;border-radius:6px}.modal-close:hover{background:var(--glow);color:var(--text)}.help-examples{margin:1rem 0}.help-row{display:flex;gap:4px;justify-content:center;margin-bottom:0.5rem;direction:rtl}.help-tile{width:42px;height:42px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;border:2px solid var(--tile-border);border-radius:8px;background:var(--tile-bg);color:var(--text)}.help-tile.correct{background:var(--correct);border-color:var(--correct);color:#fff}.help-tile.present{background:var(--present);border-color:var(--present);color:#fff}.help-tile.absent{background:var(--absent);border-color:var(--absent);color:#fff}.green{color:var(--correct)}.yellow{color:var(--present)}.gray{color:var(--absent)}.help-note{text-align:center;margin-top:1rem;font-size:1.1rem}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem;text-align:center;margin-bottom:1rem}.stat-item{display:flex;flex-direction:column}.stat-num{font-size:2rem;font-weight:800}.stat-label{font-size:0.7rem;color:var(--text2)}.dist-chart{margin-bottom:1rem}.dist-row{display:flex;align-items:center;gap:0.5rem;margin-bottom:4px;font-size:0.85rem}.dist-label{min-width:14px;text-align:center;font-weight:700}.dist-bar{height:22px;background:var(--absent);border-radius:4px;min-width:22px;display:flex;align-items:center;justify-content:flex-end;padding:0 6px;color:#fff;font-size:0.8rem;font-weight:700;transition:width 0.5s ease}.dist-bar.highlight{background:var(--correct)}.next-label{text-align:center;color:var(--text2);margin-top:1rem;font-size:0.85rem}.next-time{text-align:center;font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums}.btn-share{display:block;width:100%;margin-top:1rem;padding:0.75rem;border:none;border-radius:10px;background:linear-gradient(135deg,#6C5CE7,#a29bfe);color:#fff;font-size:1.1rem;font-weight:700;cursor:pointer;transition:opacity 0.2s}.btn-share:hover{opacity:0.9}.toast-container{position:fixed;top:80px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}.toast{background:var(--text);color:var(--bg);padding:0.6rem 1.2rem;border-radius:8px;font-size:0.95rem;font-weight:600;animation:toastIn 0.2s ease,toastOut 0.3s ease 1.2s forwards;pointer-events:auto}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes toastOut{from{opacity:1}to{opacity:0}}@media (max-width:440px){.tile{width:54px;height:54px;font-size:1.6rem}.key{height:50px;min-width:30px;font-size:1.1rem}.logo{font-size:1.3rem}}.answer-box{display:flex;align-items:center;gap:0.75rem;background:linear-gradient(135deg,var(--correct),var(--correct-dark));color:#fff;padding:0.75rem 1.25rem;border-radius:12px;font-size:1.1rem;font-weight:600;box-shadow:0 4px 20px rgba(34,197,94,0.3);animation:slideUp 0.4s ease;width:fit-content}.answer-label{font-size:0.9rem;opacity:0.9}.answer-word{font-size:1.4rem;font-weight:800;letter-spacing:2px}.answer-close{background:rgba(255,255,255,0.2);border:none;color:#fff;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:0.9rem;display:flex;align-items:center;justify-content:center;transition:background 0.2s;margin-right:auto}.answer-close:hover{background:rgba(255,255,255,0.35)}@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.history-list{display:flex;flex-direction:column;gap:8px}.history-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:10px;background:var(--tile-bg);border:1px solid var(--border);transition:background 0.2s}.history-item.today{border-color:#6C5CE7;background:var(--glow)}.history-item.completed{opacity:0.6}.history-date{display:flex;flex-direction:column;gap:2px}.history-day{font-size:0.95rem;font-weight:700}.history-datenum{font-size:0.75rem;color:var(--text2)}.history-status{display:flex;align-items:center;gap:8px}.history-badge{font-size:0.75rem;padding:3px 10px;border-radius:20px;font-weight:600}.history-badge.won{background:var(--correct);color:#fff}.history-badge.lost{background:#ef4444;color:#fff}.history-badge.playing{background:#6C5CE7;color:#fff}.btn-play{padding:6px 16px;border:none;border-radius:8px;background:#6C5CE7;color:#fff;font-size:0.85rem;font-weight:600;cursor:pointer;font-family:inherit;transition:opacity 0.2s}.btn-play:hover{opacity:0.85}.hidden{display:none !important}