/* Layout: one-screen phone game — header, centered 5x6 RTL board, Arabic keyboard pinned to the bottom */
:root{
  --bg:#eef1f4; --surface:#ffffff; --fg:#17212b; --muted:#5c6b78; --line:#c9d2da;
  --key:#d7dee5; --key-fg:#17212b;
  --hit:#2f8f6f; --near:#d39b22; --miss:#7b8794; --on-tile:#ffffff;
  --accent:#1e5f74;
  --display:system-ui,-apple-system,"Segoe UI",Tahoma,"Noto Sans Arabic",sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Tahoma,"Noto Sans Arabic",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f161d; --surface:#18222c; --fg:#e6edf3; --muted:#93a3b1; --line:#33424f;
  --key:#2b3946; --key-fg:#e6edf3;
  --hit:#3a9c7b; --near:#c99226; --miss:#3d4a56; --on-tile:#ffffff; --accent:#5fb0c9; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f161d; --surface:#18222c; --fg:#e6edf3; --muted:#93a3b1; --line:#33424f;
  --key:#2b3946; --key-fg:#e6edf3;
  --hit:#3a9c7b; --near:#c99226; --miss:#3d4a56; --on-tile:#ffffff; --accent:#5fb0c9; color-scheme:dark}
[hidden]{display:none !important}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));box-sizing:border-box}
.app{height:100%;max-width:500px;margin:0 auto;display:flex;flex-direction:column;gap:12px;padding-block:10px;box-sizing:border-box}
header{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding-block:4px 10px}
h1{font-family:var(--display);font-weight:700;font-size:1.9rem;margin:0;line-height:1;letter-spacing:0}
.sub{font-size:.8rem;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums}
.icons{display:flex;gap:6px}
.ibtn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:700 1.05rem var(--body);cursor:pointer}
.ibtn:focus-visible,.key:focus-visible,.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
main{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.board{display:grid;grid-template-rows:repeat(6,1fr);gap:6px;width:min(100%,330px);aspect-ratio:5/6;max-height:100%;max-width:100%}
.row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.tile{display:flex;align-items:center;justify-content:center;border:2px solid var(--line);border-radius:6px;
  font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,7vw,2rem);background:var(--surface);color:var(--fg);user-select:none}
.tile.filled{border-color:var(--muted);animation:pop .12s ease}
.tile.hit{background:var(--hit);border-color:var(--hit);color:var(--on-tile)}
.tile.near{background:var(--near);border-color:var(--near);color:var(--on-tile)}
.tile.miss{background:var(--miss);border-color:var(--miss);color:var(--on-tile)}
.tile.flip{animation:flip .45s ease both}
.row.shake{animation:shake .4s}
@keyframes pop{50%{transform:scale(1.08)}}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.tile.filled,.tile.flip,.row.shake{animation:none}}
.kb{display:flex;flex-direction:column;gap:6px;padding-bottom:env(safe-area-inset-bottom,0px)}
.krow{display:flex;gap:4px;justify-content:center}
.key{flex:1;min-width:0;height:52px;border:0;border-radius:7px;background:var(--key);color:var(--key-fg);
  font:500 1.15rem var(--body);cursor:pointer;padding:0;touch-action:manipulation}
.key.wide{flex:1.6;font-size:.85rem;font-weight:700}
.key.hit{background:var(--hit);color:var(--on-tile)} .key.near{background:var(--near);color:var(--on-tile)} .key.miss{background:var(--miss);color:var(--on-tile)}
.toast{position:fixed;top:calc(80px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);background:var(--fg);color:var(--bg);
  padding:10px 16px;border-radius:8px;font-weight:700;font-size:.95rem;z-index:20;max-width:calc(100% - 40px);text-align:center}
.overlay{position:fixed;inset:0;background:rgb(0 0 0 / .45);display:flex;align-items:center;justify-content:center;z-index:10;
  padding:max(16px,env(safe-area-inset-left,0px));}
.modal{background:var(--surface);color:var(--fg);border-radius:14px;padding:20px;width:100%;max-width:380px;max-height:85vh;overflow:auto;box-sizing:border-box;display:flex;flex-direction:column;gap:14px}
.modal h2{font-family:var(--display);margin:0;font-size:1.4rem;text-wrap:balance}
.modal p{margin:0;line-height:1.7;color:var(--fg)}
.ex{display:grid;grid-template-columns:repeat(5,38px);gap:4px}
.ex .tile{height:38px;font-size:1.2rem}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.stats b{display:block;font-family:var(--display);font-size:1.7rem;font-variant-numeric:tabular-nums}
.stats span{font-size:.75rem;color:var(--muted)}
.dist{display:flex;flex-direction:column;gap:4px;font-variant-numeric:tabular-nums}
.bar{display:flex;align-items:center;gap:6px;font-size:.85rem}
.bar i{display:block;background:var(--miss);color:var(--on-tile);font-style:normal;padding:2px 6px;border-radius:4px;min-width:14px;text-align:left}
.bar.now i{background:var(--hit)}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{flex:1;min-width:120px;height:46px;border-radius:10px;border:0;font:700 1rem var(--body);cursor:pointer;background:var(--hit);color:var(--on-tile)}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.answer{font-family:var(--display);font-size:1.6rem;color:var(--accent)}
textarea{width:100%;box-sizing:border-box;height:120px;font:1rem var(--body);background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:8px;direction:rtl}
.badge{display:inline-block;font-size:.7rem;font-weight:700;background:var(--near);color:var(--on-tile);border-radius:4px;padding:1px 6px;margin-inline-start:6px;vertical-align:middle}
.set{display:flex;gap:10px;align-items:flex-start;line-height:1.5;cursor:pointer}
.set input{width:20px;height:20px;margin-top:3px;flex:none}
.set small{display:block;color:var(--muted);font-size:.8rem}
:root[data-cb="1"]{--hit:#e8742c;--near:#3f8fd9}
.key[data-k="ENTER"]{font-size:1.05rem}
.key[data-k="DEL"]{flex:1.7;font-size:1.3rem}
.key{height:54px;font-size:1.25rem;transition:transform .05s}
.key:active{transform:scale(.94)}
.krow:last-child .key{height:46px}
@media (max-width:520px){
  body{padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}
  .krow{gap:3px}
  .kb{gap:5px}
}
.krow{gap:3px}
.krow:nth-child(3){justify-content:center}
.krow:nth-child(3) .key{flex:0 0 calc((100% - 33px)/12)}
.krow:nth-child(3) .key[data-k="DEL"]{flex:0 0 calc((100% - 33px)/12*2 + 3px)}
.key{font-size:1.15rem}

/* Simple system font, smaller type, square tiles sized from the available height */
:root{--t:clamp(40px,min(15vw,calc((100vh - 400px)/6)),58px)}
@supports (height:100dvh){:root{--t:clamp(40px,min(15vw,calc((100dvh - 400px)/6)),58px)}}
h1{font-size:1.3rem;font-weight:700}
.sub{font-size:.78rem}
.board{display:grid;grid-template-rows:repeat(6,var(--t));gap:6px;width:auto;aspect-ratio:auto;max-height:none;max-width:none}
.row{grid-template-columns:repeat(5,var(--t))}
.tile{font-size:calc(var(--t)*.45);font-weight:600;border-radius:6px}
.ex .tile{font-size:1.05rem;font-weight:600}
.key{height:48px;font-size:1.05rem;font-weight:500}
.krow:last-child .key{height:44px;font-size:.95rem}
.key[data-k="ENTER"]{font-size:.95rem}
.answer{font-size:1.35rem;font-weight:700}
.stats b{font-size:1.4rem}
.modal h2{font-size:1.15rem}
.tabs{display:flex;gap:6px;justify-content:center}
.tabs button{flex:1;max-width:200px;height:34px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:600 .85rem var(--body);cursor:pointer}
.tabs button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.tabs button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* Size tiles from the space the board really has (main is a size container), so it can never overlap the tabs or keyboard */
@supports (width:1cqw){
  main{container-type:size}
  .board{--t:clamp(26px,min(58px,calc((100cqh - 30px)/6),calc((100cqw - 20px)/5)),58px)}
}
main{min-height:0;overflow:hidden}
.link{background:none;border:0;color:var(--muted);font:inherit;font-size:.85rem;text-decoration:underline;cursor:pointer;padding:6px;align-self:center}
.link:disabled{text-decoration:none;cursor:default}