/* حسبة · Hisba — Layout: full-height game column: header, mode switch, LTR board (6×8 tiles sized
   to fit the screen), on-screen keyboard docked at the bottom; sheets slide up for help/stats. */
:root {
  --bg: #F2F3F7;
  --surface: #FFFFFF;
  --ink: #161A2B;
  --muted: #5E6478;
  --line: #D5D8E2;
  --key: #DDE1EA;
  --key-ink: #161A2B;
  --accent: #1B2340;
  --accent-ink: #FFFFFF;
  --hit: #1E9E62;
  --near: #DE9B00;
  --miss: #737A8C;
  --tile-ink: #FFFFFF;
  --f: "Readex Pro", "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #10142A; --surface: #191E38; --ink: #ECEEF6; --muted: #A1A7BF; --line: #313856; --key: #2B3252; --key-ink: #ECEEF6;
    --accent: #9CB0FF; --accent-ink: #10142A; --hit: #27B573; --near: #E8A912; --miss: #464D69; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #10142A; --surface: #191E38; --ink: #ECEEF6; --muted: #A1A7BF; --line: #313856; --key: #2B3252; --key-ink: #ECEEF6;
  --accent: #9CB0FF; --accent-ink: #10142A; --hit: #27B573; --near: #E8A912; --miss: #464D69; color-scheme: dark;
}

[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--f); overscroll-behavior: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

.app { height: 100%; max-width: 520px; margin-inline: auto; display: grid; grid-template-rows: auto auto 1fr auto;
  padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px));
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }

.top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding-block: 8px 4px; }
.title { text-align: center; line-height: 1.15; }
.title b { display: block; font-size: 1.45rem; font-weight: 700; letter-spacing: .01em; }
.title .sub { font-size: .78rem; color: var(--muted); }
.top-actions { display: flex; gap: 6px; align-items: center; }
.icon-btn { width: 40px; height: 40px; border: 0; background: transparent; border-radius: 10px; display: grid; place-items: center; cursor: pointer; }
.icon-btn:hover { background: var(--key); }
.icon-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lang { border: 1.5px solid var(--line); background: transparent; border-radius: 999px; padding: 5px 11px; font-size: .8rem; font-weight: 600; cursor: pointer; }

.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-block: 4px 6px; background: var(--key); border-radius: 12px; }
.modes button { border: 0; background: transparent; padding: 7px; border-radius: 9px; font-weight: 600; font-size: .9rem; color: var(--muted); cursor: pointer; }
.modes button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

.stage { position: relative; display: grid; place-items: center; min-height: 0; padding-block: 6px; }
.board { --gap: 5px; width: min(100%, 430px, calc((100dvh - 340px) * 8 / 6 + 35px)); display: grid; gap: var(--gap); }
.row { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--gap); }
.row.shake { animation: shake .4s; }
.tile { aspect-ratio: 1; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 8px; background: var(--surface);
  font-weight: 700; font-size: clamp(1rem, 5.2vw, 1.6rem); font-variant-numeric: tabular-nums; user-select: none; }
.tile.filled { border-color: var(--muted); animation: pop .12s ease; }
.tile.s2, .tile.s1, .tile.s0 { color: var(--tile-ink); border-color: transparent; animation: flip .45s ease both; }
.tile.s2 { background: var(--hit); }
.tile.s1 { background: var(--near); }
.tile.s0 { background: var(--miss); }

.keyboard { display: grid; gap: 6px; padding-block: 6px 10px; }
.krow { display: grid; gap: 6px; }
.krow.r1 { grid-template-columns: repeat(5, 1fr); }
.krow.r2 { grid-template-columns: repeat(5, 1fr); }
.krow.r3 { grid-template-columns: 1.6fr repeat(5, 1fr) 1.6fr; }
.key { height: 52px; border: 0; border-radius: 9px; background: var(--key); color: var(--key-ink); font-size: 1.25rem; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.key:active { transform: translateY(1px); filter: brightness(.95); }
.key.wide { font-size: .85rem; }
.key.k2 { background: var(--hit); color: var(--tile-ink); }
.key.k1 { background: var(--near); color: var(--tile-ink); }
.key.k0 { background: var(--miss); color: var(--tile-ink); opacity: .85; }
.key svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

.toast { position: absolute; top: 8px; inset-inline: 0; margin-inline: auto; width: max-content; max-width: 92%; background: var(--ink); color: var(--bg);
  padding: 8px 14px; border-radius: 10px; font-weight: 600; font-size: .9rem; z-index: 5; text-align: center; }

.sheet-wrap { position: fixed; inset: 0; z-index: 30; background: rgba(10,12,24,.55); display: grid; align-items: end; justify-items: center; }
.sheet { width: min(520px, 100%); max-height: 88dvh; overflow: auto; background: var(--surface); color: var(--ink); border-radius: 18px 18px 0 0;
  padding: 18px max(18px, env(safe-area-inset-left, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 14px; animation: up .22s ease; }
.sheet h2 { margin: 0; font-size: 1.2rem; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; }
.sheet p { margin: 0; }
.sheet ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 6px; }
.sheet code { direction: ltr; unicode-bidi: isolate; font-family: inherit; font-weight: 700; background: var(--key); padding: 1px 6px; border-radius: 6px; }
.legend { display: grid; gap: 8px; }
.legend div { display: flex; align-items: center; gap: 10px; }
.legend .tile { width: 34px; font-size: 1rem; animation: none; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.stats b { display: block; font-size: 1.6rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.stats span { font-size: .75rem; color: var(--muted); }
.dist { display: grid; gap: 5px; }
.dist .bar { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: center; font-variant-numeric: tabular-nums; font-size: .85rem; }
.dist .fill { background: var(--miss); color: var(--tile-ink); padding: 2px 8px; border-radius: 6px; text-align: end; min-width: 26px; font-weight: 700; }
.dist .fill.me { background: var(--hit); }
.result { text-align: center; display: grid; gap: 4px; }
.result .big { font-size: 1.6rem; font-weight: 700; }
.result .eq { direction: ltr; font-size: 1.4rem; font-weight: 700; letter-spacing: .08em; }
.btn { min-height: 48px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn.ghost { background: var(--key); color: var(--ink); }
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.timer { text-align: center; color: var(--muted); font-size: .85rem; }
.timer b { display: block; color: var(--ink); font-size: 1.4rem; font-variant-numeric: tabular-nums; direction: ltr; }
.foot { text-align: center; font-size: .78rem; color: var(--muted); }
.foot a { color: inherit; }

@keyframes pop { 50% { transform: scale(1.08); } }
@keyframes flip { 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes up { from { transform: translateY(30px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
@media (max-height: 640px) { .key { height: 44px; } .title b { font-size: 1.2rem; } }
.sheet:focus { outline: none; }