:root{
  --bg:#0e1311;--surface:#161d1a;--surface-2:#1e2723;--text:#f1eee4;--muted:#9aa69e;--accent:#d9b45b;--accent-ink:#1a1405;
  --line:#2a352f;--red:#e0574f;--green:#5fbf83;--felt:#1f4a3a;--felt-dark:#173a2d;
  --radius:14px;--s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;
  --font-display:"Reem Kufi","IBM Plex Sans Arabic",system-ui,sans-serif;--font-body:"IBM Plex Sans Arabic",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{font-size:clamp(15px,1.05vw + 10px,18px)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.7;min-height:100vh}
h1,h2,h3{font-family:var(--font-display);line-height:1.25;margin:0 0 var(--s2);font-weight:600}
h1{font-size:clamp(1.6rem,3vw,2.4rem)}h2{font-size:clamp(1.2rem,2vw,1.6rem)}h3{font-size:1.05rem;color:var(--accent)}
p{margin:0 0 var(--s2)}
button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:10px;padding:var(--s1) var(--s2);transition:background .25s ease,transform .25s ease,border-color .25s ease}
button:hover{background:#26322c;border-color:#3b4a42}
button:disabled{opacity:.4;cursor:not-allowed}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
button.primary:hover{background:#e6c46f}
button.danger{border-color:#6a3531}
select,input[type=number],input[type=text]{font:inherit;background:var(--surface-2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:6px 10px;width:100%}
input[type=range]{width:100%;accent-color:var(--accent)}
label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:4px}
.field{margin-bottom:var(--s2)}
.hidden{display:none!important}

/* هيكل */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(14,19,17,.92);backdrop-filter:blur(8px);z-index:5}
.brand{display:flex;align-items:baseline;gap:var(--s1)}
.brand h1{margin:0;font-size:1.3rem}.brand small{color:var(--muted)}
.tabs{display:flex;gap:4px;background:var(--surface);padding:4px;border-radius:12px}
.tabs button{border:none;background:transparent;color:var(--muted)}
.tabs button.active{background:var(--surface-2);color:var(--text)}
main{padding:var(--s3);max-width:1240px;margin:0 auto}
.view{display:none}.view.active{display:block;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.grid-2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s3)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3)}
.panel.tight{padding:var(--s2)}
.muted{color:var(--muted)}.small{font-size:.85rem}
.note{border-inline-start:3px solid var(--accent);padding-inline-start:var(--s2);color:var(--muted);font-size:.9rem}

/* الورق */
.card{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:64px;border-radius:8px;background:#f7f3e8;color:#1b1b1b;font-weight:700;font-family:"IBM Plex Sans Arabic",system-ui;font-size:1rem;line-height:1.05;border:1px solid #d6cfbf;user-select:none;direction:ltr}
.card.red{color:#c0392b}.card.small{width:34px;height:48px;font-size:.8rem}
.card.back{background:repeating-linear-gradient(45deg,#2d4a63,#2d4a63 4px,#284259 4px,#284259 8px);border-color:#1c2f40}
.card.empty{background:transparent;border:1px dashed var(--line);color:var(--muted);font-weight:400;font-size:.75rem}
.card.empty.active{border-color:var(--accent);color:var(--accent)}
.card.used{opacity:.18;pointer-events:none}
.card.pick{cursor:pointer;transition:transform .2s ease}.card.pick:hover{transform:translateY(-3px)}
.slots{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.deckgrid{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:4px}
.deckgrid .card{width:auto;height:44px;font-size:.85rem}

/* النتيجة */
.verdict{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.verdict .action{font-family:var(--font-display);font-size:2rem;color:var(--accent)}
.verdict .size{font-size:1.1rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s2)}
.chip{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:2px 12px;font-size:.85rem}
.chip b{color:var(--accent)}
.reasons{margin:0;padding-inline-start:1.2em}.reasons li{margin-bottom:6px}
.lesson{margin-top:var(--s2);padding:var(--s2);background:var(--surface-2);border-radius:10px;font-size:.9rem}

/* الطاولة */
.table-wrap{position:relative;width:100%;aspect-ratio:16/10;min-height:440px;margin-bottom:var(--s2)}
.felt{position:absolute;inset:8% 6%;border-radius:999px;background:radial-gradient(ellipse at center,var(--felt),var(--felt-dark));border:10px solid #3a2a1d;box-shadow:inset 0 0 60px rgba(0,0,0,.45)}
.center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center}
.center .board{display:flex;gap:6px;justify-content:center;min-height:64px;margin-bottom:6px}
.center .pot{font-family:var(--font-display);color:var(--accent)}
.seat{position:absolute;width:150px;transform:translate(-50%,-50%);text-align:center;transition:opacity .3s ease}
.seat .box{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px 8px}
.seat.folded{opacity:.35}.seat.acting .box{border-color:var(--accent);box-shadow:0 0 0 2px rgba(217,180,91,.25)}
.seat .name{font-size:.85rem}.seat .stack{font-size:.85rem;color:var(--accent)}
.seat .cards{display:flex;gap:4px;justify-content:center;margin:4px 0;min-height:48px}
.seat .bet{position:absolute;font-size:.8rem;background:rgba(0,0,0,.45);padding:1px 8px;border-radius:999px}
.seat .btn-mark{position:absolute;width:22px;height:22px;border-radius:50%;background:#f7f3e8;color:#111;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.seat .last{font-size:.75rem;color:var(--muted);min-height:1.2em}
.actions{display:flex;flex-wrap:wrap;gap:var(--s1);align-items:center;margin-top:var(--s2)}
.actions .sizer{display:flex;align-items:center;gap:var(--s1);flex:1;min-width:220px}
.actions .sizer input[type=number]{width:80px}
.actions .quick{display:flex;gap:4px}.actions .quick button{padding:4px 8px;font-size:.8rem}
.coachbox{position:sticky;top:80px}
.feed{max-height:220px;overflow:auto;font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);padding-top:var(--s1)}
.feed div{padding:2px 0}
.stat{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:4px 0;font-size:.9rem}
.match{color:var(--green)}.mismatch{color:var(--red)}

/* الدروس */
.lesson-card{border:1px solid var(--line);border-radius:var(--radius);padding:var(--s2) var(--s3);margin-bottom:var(--s2);background:var(--surface)}
.lesson-card summary{cursor:pointer;font-family:var(--font-display);font-size:1.05rem;display:flex;justify-content:space-between;align-items:center}
.lesson-card summary .tag{font-size:.75rem;color:var(--muted);font-family:var(--font-body)}
.lesson-card.done summary .tag{color:var(--green)}
.quiz{margin-top:var(--s2);padding:var(--s2);background:var(--surface-2);border-radius:10px}
.quiz .opts{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.progress{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden;margin-bottom:var(--s3)}
.progress i{display:block;height:100%;background:var(--accent);transition:width .6s ease}

@media (max-width:900px){main{padding:var(--s2)}.grid-2,.grid-3{grid-template-columns:1fr}.deckgrid{grid-template-columns:repeat(7,minmax(0,1fr))}.table-wrap{min-height:480px;aspect-ratio:auto}.felt{inset:4% 2%}.seat{width:104px}.seat .cards .card.small{width:28px;height:40px;font-size:.7rem}.seat .name,.seat .stack,.seat .last{font-size:.72rem}.coachbox{position:static}.topbar{flex-direction:column;align-items:stretch}.tabs{justify-content:space-between}}
