.screen{display:none}.screen.on{display:block;animation:fade .25s}
.hero{text-align:center;padding:10px 0 6px}
.hero .logo{width:76px;height:76px;margin:0 auto 6px;border-radius:22px;background:linear-gradient(145deg,#1e5a4e,#0f3a34);display:grid;place-items:center;border:1px solid var(--line);box-shadow:0 10px 30px #0008}
.hero .logo svg{width:52px;height:52px}
.modes{display:grid;gap:12px;margin-top:14px}
.mode{display:flex;align-items:center;gap:14px;padding:16px;border-radius:18px;text-align:right;width:100%;
  background:linear-gradient(180deg,#2fd978,var(--green2));color:#05210f;box-shadow:0 8px 22px #27c46b33,inset 0 1px 0 #fff5}
.mode.alt{background:linear-gradient(180deg,#1d4a57,#153743);color:var(--text);box-shadow:none;border:1px solid var(--line)}
.mode .ic{font-size:28px;width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:#0002}
.mode b{display:block;font-size:17px}.mode small{font-size:12.5px;opacity:.8;font-weight:600}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{flex:1;min-width:70px;padding:11px 6px;border-radius:12px;background:#ffffff10;border:1px solid #ffffff18;font-weight:800;font-size:14px}
.seg button.on{background:var(--green);color:#042110;border-color:transparent}
.lbl{font-weight:800;margin:14px 0 8px;font-size:14px;color:var(--muted)}
/* اللوحة */
:root{--bs:min(calc(100vw - 28px),calc(100svh - 270px),540px)}
.pbar{display:flex;align-items:center;gap:10px;width:var(--bs);margin:0 auto;padding:6px 2px;min-height:44px}
.pbar .av{width:34px;height:34px;border-radius:50%;background:var(--panel2);display:grid;place-items:center;font-weight:900;border:1px solid var(--line)}
.pbar .nm{font-weight:800;font-size:14px;line-height:1.1}
.pbar .cap{font-size:12px;color:var(--muted);min-height:16px;display:flex;align-items:center;gap:0;flex-wrap:wrap}
.pbar .cap svg{width:16px;height:16px;margin-inline-end:-5px}
.pbar .turn{margin-inline-start:auto;width:10px;height:10px;border-radius:50%;background:#ffffff25}
.pbar.active .turn{background:var(--green);box-shadow:0 0 0 4px #27c46b33;animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px #27c46b11}}
#board{width:var(--bs);height:var(--bs);margin:2px auto;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);direction:ltr;
  border-radius:10px;overflow:hidden;box-shadow:0 12px 34px #000a,0 0 0 3px #0a1f22;position:relative;touch-action:manipulation}
.sq{position:relative;display:grid;place-items:center}
.sq.l{background:#dfe9e4}.sq.d{background:#5f8f84}
.sq .co{position:absolute;font-size:calc(var(--bs)/36);font-weight:900;opacity:.75;pointer-events:none}
.sq.l .co{color:#5f8f84}.sq.d .co{color:#dfe9e4}
.sq .co.r{top:2px;left:3px}.sq .co.f{bottom:1px;right:3px}
.sq.last::before{content:"";position:absolute;inset:0;background:#f2e05a88}
.sq.sel::before{content:"";position:absolute;inset:0;background:#4ee38acc}
.sq.chk::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,#ff3b30 0%,#ff3b3000 78%)}
.sq.hint::before{content:"";position:absolute;inset:0;background:#4aa8ffaa;animation:pulse2 .8s infinite alternate}
@keyframes pulse2{to{background:#4aa8ff44}}
.sq .dot{position:absolute;width:30%;height:30%;border-radius:50%;background:#0d3b2fb0;pointer-events:none}
.sq .ring{position:absolute;inset:4%;border-radius:50%;border:calc(var(--bs)/80 + 2px) solid #0d3b2fb0;pointer-events:none}
.pc{width:92%;height:92%;position:relative;z-index:2;pointer-events:none;filter:drop-shadow(0 2px 1.5px #0005)}
.pc.slide{transition:transform .22s cubic-bezier(.2,.8,.3,1)}
.moves{width:var(--bs);margin:6px auto 0;display:flex;gap:6px;overflow-x:auto;direction:ltr;padding:4px 2px;font-size:13px;font-weight:700;white-space:nowrap;scrollbar-width:none;min-height:30px}
.moves::-webkit-scrollbar{display:none}
.moves span{padding:3px 8px;border-radius:8px;background:#ffffff10}
.moves span.n{background:none;color:var(--muted);padding-inline:2px}
.moves span.cur{background:var(--green);color:#042110}
.ctrls{width:var(--bs);margin:8px auto 0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.ctrls button{padding:10px 2px;border-radius:12px;background:#ffffff12;border:1px solid #ffffff1a;font-size:12px;font-weight:800;display:flex;flex-direction:column;gap:2px;align-items:center}
.ctrls button i{font-style:normal;font-size:19px}
.ctrls button.warn{background:#ee5d5726}
.ctrls button[disabled]{opacity:.4;pointer-events:none}
.status{width:var(--bs);margin:6px auto 0;text-align:center;font-weight:800;font-size:14px;min-height:22px;color:var(--gold)}
.promo{display:flex;gap:10px;justify-content:center;margin-top:12px}
.promo button{width:68px;height:68px;border-radius:16px;background:var(--panel2);border:1px solid var(--line);padding:6px}
.promo button svg{width:100%;height:100%}
.code{font-size:38px;font-weight:900;letter-spacing:8px;text-align:center;direction:ltr;background:#0007;border-radius:16px;padding:14px;border:1px dashed var(--line);margin:10px 0}
.spin{width:26px;height:26px;border:3px solid #ffffff30;border-top-color:var(--green);border-radius:50%;animation:rot 1s linear infinite;display:inline-block}
@keyframes rot{to{transform:rotate(360deg)}}
.input{width:100%;padding:13px;border-radius:12px;background:#0007;border:1px solid var(--line);color:var(--text);font-size:20px;font-weight:800;text-align:center;direction:ltr;letter-spacing:4px;text-transform:lowercase;font-family:inherit}
.lb{display:grid;gap:8px;max-height:56vh;overflow:auto}
.lb .it{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#ffffff0d}
.lb .it .rk{width:28px;font-weight:900;text-align:center}
.lb .it .pt{margin-inline-start:auto;font-weight:900;color:var(--gold)}
.lb .it.me{outline:2px solid var(--green)}
.result{text-align:center}
.result .big{font-size:56px;animation:pop .5s}
.result h2{margin:6px 0 4px;font-size:22px}
.result .row{margin-top:16px}
.result .row .btn{flex:1}