:root{
  --black:#000;--charcoal:#1A2E23;--phthalo:#092812;--teal:#0A3D2F;--sea:#1D8052;--apple:#80BB26;--mint:#00D4AA;--sage:#A8C5A0;--white:#fff;
  --red:#D92D20;--line:#d5e6d9;--muted:#5b7264;--card:#fff;
  --grad:linear-gradient(135deg,#000 0%,#092812 50%,#1D8052 100%);
  --font:'IBM Plex Sans Arabic','Noto Sans Arabic','Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --vvh:100vh;--vvt:0px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* يكبر كل شيء تلقائياً على الشاشات الكبيرة (تلفزيون / شاشة معرض) */
html{font-size:clamp(15px,1.05vw,34px);height:100%;-webkit-text-size-adjust:100%}
body{height:100%;overflow:hidden;font-family:var(--font);color:var(--charcoal);background:#eef7ef;
  background-image:radial-gradient(ellipse at 100% 100%,rgba(128,187,38,.35) 0%,transparent 55%),radial-gradient(ellipse at 0% 0%,#fff 0%,transparent 60%);overscroll-behavior:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
.ltr{direction:ltr;unicode-bidi:isolate}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

#app{position:fixed;left:0;right:0;top:var(--vvt);height:var(--vvh);display:flex;flex-direction:column}
#hdr{flex:none;display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.55rem max(1rem,env(safe-area-inset-right)) .55rem max(1rem,env(safe-area-inset-left));
  padding-top:max(.55rem,env(safe-area-inset-top));background:rgba(255,255,255,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.logo img{height:2.3rem;display:block}
#hdr nav{display:flex;align-items:center;gap:.6rem}
.langs{display:flex;background:#e3f0e5;border-radius:999px;padding:.18rem}
.langs button{padding:.3rem .65rem;border-radius:999px;font-size:.8rem;font-weight:600;color:var(--sea);min-width:2.3rem}
.langs button.on{background:var(--phthalo);color:#fff}
.lbbtn{display:flex;align-items:center;gap:.35rem;font-weight:600;font-size:.85rem;color:var(--phthalo);padding:.4rem .6rem;border-radius:999px}
.lbbtn:hover{background:#e3f0e5}
#main{flex:1;min-height:0;position:relative}
.screen{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1.25rem 1rem calc(1.5rem + env(safe-area-inset-bottom))}
.wrap{max-width:68rem;margin:0 auto}
.center{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999px;padding:.9rem 1.6rem;font-weight:700;font-size:1.05rem;
  background:var(--grad);color:#fff;box-shadow:0 .5rem 1.4rem rgba(9,40,18,.25);transition:transform .15s}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:scale(.98)}
.btn.apple{background:var(--apple);color:var(--phthalo)}
.btn.ghost{background:#fff;color:var(--phthalo);border:2px solid var(--line);box-shadow:none}
.btn.sm{padding:.6rem 1rem;font-size:.9rem}
.btn.block{width:100%}

/* ---------- home ---------- */
.badge{display:inline-block;background:var(--apple);color:var(--phthalo);font-weight:700;font-size:.8rem;padding:.25rem .8rem;border-radius:999px}
.title{font-size:clamp(4.5rem,22vw,9rem);font-weight:700;line-height:1.25;letter-spacing:-.02em;color:var(--apple);margin:.3rem 0 .2rem;
  -webkit-text-stroke:.06em #fff;paint-order:stroke fill;
  filter:drop-shadow(.05em .05em 0 var(--sea)) drop-shadow(.05em .05em 0 var(--sea)) drop-shadow(0 .12em .25em rgba(9,40,18,.25))}
html[lang=en] .title{font-size:clamp(3rem,13vw,7rem);line-height:1.15}
.sub{font-size:1.2rem;color:var(--muted);max-width:34rem}
.steps{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:1.3rem 0 1.6rem}
.steps span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;font-size:.85rem;font-weight:600;color:var(--phthalo)}
.steps b{color:var(--sea);font-family:var(--mono);margin-inline-end:.3rem}
.dare{background:var(--grad);color:#fff;border-radius:1.2rem;padding:1rem 1.3rem;margin-bottom:1.2rem;max-width:30rem;position:relative}
.dare b{color:var(--apple);font-size:1.6rem;display:block}
.rules{margin-top:1.2rem;font-size:.8rem;color:var(--muted)}

/* ---------- countdown ---------- */
.count{font-size:min(45vw,45vh);font-weight:700;color:var(--phthalo);line-height:1;animation:pop .9s ease both}
.count.go{color:var(--apple);font-size:min(22vw,30vh);-webkit-text-stroke:.03em var(--phthalo)}
@keyframes pop{0%{transform:scale(.3);opacity:0}30%{transform:scale(1.1);opacity:1}80%{opacity:1}100%{transform:scale(1);opacity:.2}}

/* ---------- game ---------- */
.game{height:100%;display:flex;flex-direction:column}
.gtop{flex:none;padding:.6rem 1rem .5rem;background:rgba(255,255,255,.8);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.gtop .row{max-width:68rem;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.gtitle{min-width:0}
.gtitle h2{font-size:1.25rem;font-weight:700;color:var(--phthalo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gtitle .badge{font-size:.7rem;padding:.1rem .6rem}
.timer{display:flex;align-items:center;gap:.4rem;font-family:var(--mono);font-weight:700;font-size:2rem;color:var(--phthalo);direction:ltr;font-variant-numeric:tabular-nums}
.timer i{width:.6rem;height:.6rem;border-radius:50%;background:var(--red);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
.prog{max-width:68rem;margin:.45rem auto 0;height:.35rem;border-radius:99px;background:#dcebdf;overflow:hidden}
.prog b{display:block;height:100%;background:linear-gradient(90deg,var(--sea),var(--apple));transition:width .3s}
.over .timer{color:var(--red);animation:throb .8s infinite}
@keyframes throb{50%{transform:scale(1.06)}}
.over .gtop{background:#fff1f0;border-bottom-color:#f5b5ae}
.over .prog b{background:var(--red)}
.overmsg{display:none;max-width:68rem;margin:.4rem auto 0;color:var(--red);font-weight:700;font-size:.85rem;text-align:center}
.over .overmsg{display:block}

.gbody{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom))}
.ggrid{max-width:68rem;margin:0 auto;display:grid;gap:1.1rem}
.docside{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.dochint{text-align:center;font-size:.78rem;color:var(--muted);margin-top:.5rem}
.form{display:grid;gap:.75rem;align-content:start}
.form.two{grid-template-columns:1fr 1fr}
.form.two .wide,.form.two .actions{grid-column:1/-1}
.fld label{display:block;font-size:.85rem;font-weight:600;color:var(--phthalo);margin-bottom:.3rem}
.fld .inwrap{position:relative}
.fld input{width:100%;border:2px solid var(--line);background:#fff;border-radius:.9rem;padding:.75rem .9rem;font-size:max(16px,1rem);font-weight:500;outline:0;transition:border-color .15s,box-shadow .15s}
.fld input:focus{border-color:var(--apple);box-shadow:0 0 0 .25rem rgba(128,187,38,.22)}
.fld.ok input{border-color:var(--sea);background:#f1faf3}
.fld.bad input{border-color:var(--red);background:#fff5f4}
.fld .mark{position:absolute;inset-inline-end:.7rem;top:50%;transform:translateY(-50%);font-size:1rem;pointer-events:none;opacity:0}
.fld.ok .mark{opacity:1}
.fld.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.elapsed{text-align:center;font-size:.8rem;color:var(--muted)}

/* شريط التركيز: القيمة المطلوبة للحقل الحالي — يظهر عند فتح الكيبورد */
.strip{display:none;flex:none;background:var(--phthalo);color:#fff;padding:.5rem 1rem;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.strip small{display:block;font-size:.7rem;color:var(--apple);font-weight:600}
.strip .val{font-size:1.25rem;font-weight:700;line-height:1.4;word-break:break-word}
.strip .val.num{font-family:var(--mono);letter-spacing:.06em;direction:ltr;text-align:start;unicode-bidi:plaintext}
.strip .val u{text-decoration:none;color:var(--apple)}
.kbnav{display:none}

.game.compact .strip{display:block}
.game.compact .gtop{padding:.3rem 1rem}
.game.compact .gtitle .badge,.game.compact .prog,.game.compact .dochint,.game.compact .elapsed,.game.compact .overmsg{display:none}
.game.compact .gtitle h2{font-size:.9rem}
.game.compact .timer{font-size:1.25rem}
.game.compact .gbody{padding:.5rem 1rem}
.game.compact .docside{display:none}
.game.compact .form{display:block}
.game.compact .fld{display:none}
.game.compact .fld.active{display:block}
.game.compact .actions{display:none}
.game.compact .kbnav{display:flex;gap:.5rem;margin-top:.5rem;align-items:center;justify-content:space-between}
.game.compact .kbnav span{font-size:.8rem;color:var(--muted);font-weight:600}
/* لو في مساحة كافية فوق الكيبورد (تابلت) نعرض الوثيقة أيضاً */
.game.compact.roomy .docside{display:block}
.game.compact.roomy .doc{height:calc(var(--vvh) - 15.5rem);width:auto;max-width:100%;margin:0 auto .5rem}

@media (min-width:900px){
  .ggrid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;gap:1.6rem}
  .game:not(.compact) .doc{max-height:calc(var(--vvh) - 13rem)}
  .gtitle h2{font-size:1.6rem}
  .timer{font-size:2.6rem}
}
/* عرض ضيق بعمود واحد: القيمة المطلوبة تبقى ظاهرة دائماً أثناء الكتابة حتى لو نزلت الوثيقة عن الشاشة */
@media (max-width:899px){.game.focus .strip{display:block}}
@media (max-width:520px){
  .lbbtn span:not(.ico){display:none}
  .logo img{height:1.9rem}
  .timer{font-size:1.6rem}
  .gtitle h2{font-size:1.05rem}
}

/* ---------- mock documents ---------- */
.doc{container-type:inline-size;position:relative;width:100%;aspect-ratio:3/2;margin:0 auto;background:#fff;border-radius:1rem;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 .8rem 2rem rgba(9,40,18,.12);color:#0e3b4a}
.doc .in{position:absolute;inset:0;padding:4cqw 5cqw;font-size:2.5cqw;display:flex;flex-direction:column}
.doc .wm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:9cqw;font-weight:700;color:rgba(14,59,74,.045);transform:rotate(-18deg);pointer-events:none;white-space:nowrap}
.doc .dhead{display:flex;justify-content:space-between;align-items:center;border-bottom:.3cqw solid currentColor;padding-bottom:1.6cqw;margin-bottom:2cqw}
.doc .dhead h3{font-size:4.2cqw;font-weight:700}
.doc .dhead small{display:block;font-size:1.9cqw;opacity:.7;font-weight:500}
.doc .seal{width:8cqw;height:8cqw;border-radius:50%;border:.5cqw solid currentColor;display:grid;place-items:center;font-size:3.4cqw;font-weight:700;opacity:.8}
.doc .k{font-size:2cqw;opacity:.65;font-weight:500}
.doc .v{font-weight:700;font-size:3cqw;border-radius:.8cqw;padding:0 .8cqw;margin:0 -.8cqw;transition:background .2s,box-shadow .2s;display:inline-block}
.doc .v.num{font-family:var(--mono);direction:ltr;unicode-bidi:isolate;letter-spacing:.04em}
.doc .v.hl{background:#fff3a6;box-shadow:0 0 0 .5cqw #fff3a6,0 0 0 .8cqw var(--apple)}
.doc .dfoot{margin-top:auto;font-size:1.6cqw;opacity:.55;display:flex;justify-content:space-between}
.doc.cr{background:linear-gradient(160deg,#fff 62%,#e2f6f1 62.2%)}
.doc.cr .body{display:grid;grid-template-columns:1fr 27cqw;gap:3cqw;flex:1;min-height:0}
.doc.cr .rows{display:grid;gap:1.6cqw;align-content:start}
.doc.cr .name .v{font-size:3.5cqw;line-height:1.5}
.doc .qr{background:#fff;border:.3cqw solid #0e3b4a;border-radius:1.5cqw;padding:1.6cqw;text-align:center;align-self:center}
.doc .qr svg{width:100%;display:block}
.doc .qr .k{margin-bottom:.8cqw}
.doc.vat{color:#1c2f5a;background:linear-gradient(180deg,#eef3fb 0,#fff 30%)}
.doc.vat .rows{display:grid;grid-template-columns:1fr 1fr;gap:2.2cqw 4cqw}
.doc.vat .big{grid-column:1/-1;background:#f3f7ff;border:.25cqw dashed #9bb0d8;border-radius:1.5cqw;padding:1.8cqw 2.5cqw;text-align:center}
.doc.vat .big .v{font-size:5.4cqw;letter-spacing:.1em}
.doc.na{color:#3a2a0e;background:linear-gradient(180deg,#fdf6e3 0,#fff 28%)}
.doc.na .rows{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5cqw 2cqw}
.doc.na .cell{border:.25cqw solid #e2d3a8;border-radius:1.3cqw;padding:1.1cqw 1.8cqw;background:#fffdf6;min-width:0}
.doc.na .cell.w2{grid-column:span 2}
.doc.na .cell.w3{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;background:#fbefc9}
.doc.na .cell.w3 .v{font-size:4.6cqw;letter-spacing:.12em}

/* ---------- result ---------- */
.res{display:grid;gap:1.1rem}
.hero{background:var(--grad);color:#fff;border-radius:1.5rem;padding:1.6rem 1.3rem;text-align:center;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;opacity:.5;background-image:repeating-linear-gradient(60deg,transparent,transparent 20px,rgba(128,187,38,.15) 20px,rgba(128,187,38,.15) 21px),repeating-linear-gradient(-60deg,transparent,transparent 20px,rgba(128,187,38,.15) 20px,rgba(128,187,38,.15) 21px)}
.hero>*{position:relative}
.hero p{font-size:1.1rem;font-weight:300}
.hero .big{font-family:var(--mono);font-size:clamp(4rem,18vw,7rem);font-weight:700;color:var(--apple);line-height:1.1;direction:ltr}
.hero.late .big{color:#ff8a7a}
.hero .late-note{display:inline-block;margin-top:.5rem;background:var(--red);color:#fff;border-radius:999px;padding:.25rem .9rem;font-size:.85rem;font-weight:600}
.cards{display:grid;gap:1.1rem}
@media (min-width:900px){.cards{grid-template-columns:1fr 1fr;align-items:start}}
.card{background:#fff;border:1px solid var(--line);border-radius:1.3rem;padding:1.2rem;box-shadow:0 .4rem 1.2rem rgba(9,40,18,.06)}
.card h3{font-size:1.2rem;font-weight:700;color:var(--phthalo);margin-bottom:.2rem}
.card .hint{font-size:.85rem;color:var(--muted);margin-bottom:.9rem}
.calcin{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:.9rem}
.stepper label{display:block;font-size:.8rem;font-weight:600;margin-bottom:.3rem}
.stepper div{display:flex;border:2px solid var(--line);border-radius:.9rem;overflow:hidden}
.stepper button{width:2.6rem;font-size:1.3rem;font-weight:700;color:var(--sea);background:#f1f8f2}
.stepper input{flex:1;min-width:0;border:0;text-align:center;font-family:var(--mono);font-weight:700;font-size:max(16px,1.1rem);padding:.55rem 0;outline:0;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none}
.loss{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.loss div{background:#fff5f4;border:1px solid #f8cfc9;border-radius:.9rem;padding:.7rem .4rem;text-align:center}
.loss small{display:block;font-size:.75rem;color:var(--muted);font-weight:600}
.loss b{display:block;font-size:1.25rem;color:var(--red);font-weight:700;line-height:1.5}
.loss .yr{grid-column:1/-1;background:var(--red);border-color:var(--red)}
.loss .yr small{color:#ffd9d4}.loss .yr b{color:#fff;font-size:1.9rem}
.formula{margin-top:.8rem;font-size:.75rem;color:var(--muted);background:#f4f9f5;border-radius:.7rem;padding:.6rem .8rem;line-height:1.8}
.sol{background:var(--teal);background-image:radial-gradient(ellipse at 30% 20%,rgba(128,187,38,.4) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(255,255,255,.18) 0%,transparent 50%);color:#fff;border:0}
.sol h3{color:#fff}.sol .hint{color:#cfe6d6}
.code{display:flex;gap:.4rem;justify-content:center;direction:ltr;margin:.8rem 0}
.code span{width:2.6rem;height:3.2rem;border-radius:.7rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;font-family:var(--mono);font-size:1.6rem;font-weight:700;color:var(--apple)}
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:.6rem;align-items:center;text-align:center;margin:.9rem 0}
.vs small{display:block;font-size:.75rem;opacity:.8}
.vs b{font-family:var(--mono);font-size:1.5rem;direction:ltr;display:block}
.vs .me b{color:#ff8a7a}.vs .mk b{color:var(--apple)}
.vs i{font-style:normal;font-weight:700;opacity:.6}
.shgrid{display:grid;gap:.8rem}
.nmw label{display:block;font-size:.9rem;font-weight:700;color:var(--phthalo);margin-bottom:.3rem}
.shprev{text-align:center}
.shprev canvas{display:block;width:100%;max-width:24rem;height:auto;margin:0 auto;border-radius:1rem;border:1px solid var(--line);box-shadow:0 .6rem 1.6rem rgba(9,40,18,.14)}
.shprev small{display:block;margin-top:.4rem;font-size:.75rem;color:var(--muted)}
.btn.dl{width:100%;font-size:1.15rem;padding:1rem;box-shadow:0 .5rem 1.4rem rgba(128,187,38,.45)}
.btn[disabled]{opacity:.6;pointer-events:none}
.shgrid .sharetxt{margin-bottom:0}
/* شاشات عريضة: المحاكي على اليسار والتحكم على اليمين */
@media (min-width:760px){
  .shgrid{grid-template-columns:minmax(0,1fr) minmax(16rem,24rem);column-gap:1.4rem;align-items:start}
  .shgrid>*{grid-column:1}
  .shgrid .shprev{grid-column:2;grid-row:1/span 4}
  html[dir=ltr] .shgrid{grid-template-columns:minmax(16rem,24rem) minmax(0,1fr)}
  html[dir=ltr] .shgrid>*{grid-column:2}
  html[dir=ltr] .shgrid .shprev{grid-column:1}
}
.share .nm{display:flex;gap:.5rem}
.share .nm input{flex:1;min-width:0;border:2px solid var(--line);border-radius:.9rem;padding:.65rem .9rem;font-size:max(16px,1rem);outline:0}
.share .nm input:focus{border-color:var(--apple)}
.sharetxt{white-space:pre-wrap;background:#f4f9f5;border:1px dashed var(--sage);border-radius:.9rem;padding:.8rem;font-size:.9rem;line-height:1.8;margin-bottom:.8rem;word-break:break-word}
.sbtns{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.sbtns .btn{padding:.7rem .5rem;font-size:.9rem}
.sbtns .full{grid-column:1/-1}
.wa{background:#1fa855}.xx{background:#000}.li{background:#0a66c2}
.again{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:.4rem}

/* ---------- leaderboard ---------- */
.lbstats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1rem 0}
.lbstats div{background:#fff;border:1px solid var(--line);border-radius:1rem;padding:.8rem .4rem;text-align:center}
.lbstats b{display:block;font-size:1.5rem;color:var(--sea);font-family:var(--mono)}
.lbstats small{font-size:.75rem;color:var(--muted)}
.lb{display:grid;gap:.5rem}
.lb .rowi{display:grid;grid-template-columns:2.4rem 1fr auto;gap:.6rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:1rem;padding:.7rem .9rem}
.lb .rk{width:2.2rem;height:2.2rem;border-radius:50%;background:#e3f0e5;display:grid;place-items:center;font-weight:700;font-family:var(--mono);color:var(--phthalo)}
.lb .rowi:nth-child(1) .rk{background:var(--apple)}
.lb .nmn{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .nmn small{display:block;font-weight:400;font-size:.75rem;color:var(--muted)}
.lb .tm{font-family:var(--mono);font-weight:700;color:var(--sea);direction:ltr}
.lb .rowi.me{border-color:var(--apple);box-shadow:0 0 0 .2rem rgba(128,187,38,.2)}
.empty{text-align:center;color:var(--muted);padding:2rem 0}
h1.pg{font-size:1.9rem;color:var(--phthalo)}

/* القيم المرسومة كصور */
.doc .v canvas,.strip .val canvas{display:block;max-width:100%}
.strip .val{min-height:1.7rem}
.spin{width:2.6rem;height:2.6rem;border-radius:50%;border:.3rem solid #d5e6d9;border-top-color:var(--sea);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.card.warn{background:#fff5f4;border-color:#f5b5ae}
.card.warn h3{color:var(--red)}
.card.warn p{line-height:1.9}
#toast{position:fixed;left:50%;top:calc(var(--vvt) + 4.2rem);transform:translate(-50%,-1rem);background:var(--phthalo);color:#fff;padding:.6rem 1.1rem;border-radius:999px;font-size:.9rem;font-weight:600;
  opacity:0;pointer-events:none;transition:.25s;z-index:50;max-width:92vw;text-align:center;box-shadow:0 .5rem 1.5rem rgba(0,0,0,.25)}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast.err{background:var(--red)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}