@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700;800&display=swap');
:root { --bg:#f7f5f0; --ink:#232323; --muted:#898984; --line:#d9d7d0; --key:#e4e2dc; --accent:#e5674f; --green:#599b72; --yellow:#d7a847; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Heebo,Arial,sans-serif; min-height:100svh; }
.app-shell { width:min(100%, 540px); min-height:100svh; margin:auto; display:flex; flex-direction:column; padding:0 18px env(safe-area-inset-bottom); }
.topbar { height:72px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:8px; font-size:23px; font-weight:800; letter-spacing:-.04em; }
.brand-mark { display:grid; place-items:center; width:31px; height:31px; color:#fff; background:var(--accent); border-radius:10px 10px 10px 3px; font-size:20px; }
.icon-button { border:0; background:transparent; color:var(--ink); width:38px; height:38px; border-radius:50%; font-size:22px; cursor:pointer; }
.icon-button:hover { background:#eceae4; }
.game { display:flex; flex:1; flex-direction:column; align-items:center; padding-top:24px; }
.daily-row { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:13px; margin-bottom:18px; }
.dot { width:4px; height:4px; background:var(--accent); border-radius:50%; }
.board { direction:rtl; display:grid; grid-template-columns:repeat(5, 1fr); gap:7px; width:min(100%, 340px); }
.tile { aspect-ratio:1; display:grid; place-items:center; border:1.5px solid var(--line); font-size:29px; font-weight:800; border-radius:8px; transition:transform .16s, background .2s, color .2s, border .2s; }
.tile.filled { border-color:#aaa79f; animation:pop .12s ease-out; }
.tile.correct,.tile.present,.tile.absent { color:#fff; border-color:transparent; }
.tile.correct { background:var(--green); }.tile.present { background:var(--yellow); }.tile.absent { background:#9a9a96; }
.message { height:28px; margin:17px 0 0; font-weight:700; font-size:15px; }
.keyboard-wrap { padding:12px 0 22px; }
.keyboard { direction:rtl; display:flex; flex-direction:column; gap:7px; }
.key-row { display:flex; justify-content:center; gap:5px; }
.key { border:0; border-radius:6px; background:var(--key); color:var(--ink); height:52px; min-width:29px; flex:1; padding:0 2px; font-family:inherit; font-weight:700; font-size:17px; cursor:pointer; touch-action:manipulation; transition:transform .08s, background .2s; }
.key:active { transform:scale(.94); }.key.wide { flex:1.55; font-size:14px; }.key.correct { background:var(--green); color:#fff; }.key.present { background:var(--yellow); color:#fff; }.key.absent { background:#b5b4af; color:#fff; }
.tip { text-align:center; color:var(--muted); font-size:12px; margin:13px 0 0; }
dialog { width:min(88vw,360px); border:0; border-radius:16px; padding:28px 24px; color:var(--ink); background:#fffdf9; box-shadow:0 20px 60px #2222; font-family:inherit; text-align:center; } dialog::backdrop { background:#25241f55; backdrop-filter:blur(3px); }
.close { position:absolute; left:14px; top:10px; border:0; background:none; font-size:25px; cursor:pointer; color:var(--muted); }.modal-title { font-size:24px; font-weight:800; margin:4px 0 12px; }.modal-copy { color:var(--muted); line-height:1.7; margin:0; }.stats { display:flex; justify-content:center; gap:30px; margin-top:18px; }.stat strong { display:block; font-size:27px; }.stat span { color:var(--muted); font-size:12px; }
.share-button { border:0; background:var(--accent); color:#fff; font:700 15px Heebo, sans-serif; border-radius:9px; padding:10px 24px; margin-top:22px; cursor:pointer; }
@keyframes pop { 50% { transform:scale(1.06); } } @media (max-height:700px) { .topbar{height:60px}.game{padding-top:14px}.daily-row{margin-bottom:11px}.tile{font-size:25px}.key{height:50px} }