/* كمّل المثل (أكتوبر 2026) — كل الأسماء تبدأ بـ cp- حتى ما تتداخل مع باقي الموقع
   ألوان مستوحاة من السدو: عنابي · بني غامق · ذهبي · رملي. ألوان النتيجة نفس «خمّن الكلمة»: أخضر · أصفر · رمادي */
.cp{--ink:#2B1D14;--sub:#6B5A4A;--sand:#FAF3E7;--paper:#FFFDF8;--line:#E8D9C0;--red:#7A2430;--redsh:#561821;--gold:#E3AE45;--goldsh:#A97A1E;
    --c:#16A34A;--csh:#0F7A36;--p:#E9A21B;--psh:#B57A0C;--a:#A39A8F;--ash:#7E766C;
    position:relative;max-width:560px;margin:0 auto;direction:rtl;padding-bottom:112px;color:var(--ink);-webkit-tap-highlight-color:transparent}
.cp [hidden]{display:none!important}
.cp button{font-family:inherit;-webkit-user-select:none;user-select:none}

/* شريط السدو */
.cp-sadu{height:16px;margin:-24px -16px 16px;
    background:
        linear-gradient(135deg,var(--red) 25%,transparent 25%) -8px 0/16px 16px,
        linear-gradient(225deg,var(--red) 25%,transparent 25%) -8px 0/16px 16px,
        linear-gradient(315deg,var(--ink) 25%,transparent 25%) 0 0/16px 16px,
        linear-gradient(45deg,var(--ink) 25%,transparent 25%) 0 0/16px 16px,
        var(--gold);
    border-bottom:4px solid var(--red)}
.cp-sadu-sm{height:10px;margin:-14px -14px 12px;background-size:10px 10px;border-bottom-width:3px;border-radius:16px 16px 0 0;
    background-position:-5px 0,-5px 0,0 0,0 0}

/* الأزرار */
.cp-btn{display:block;width:100%;max-width:340px;margin:0 auto 10px;border:0;border-radius:16px;padding:13px 10px;font-weight:900;font-size:16px;cursor:pointer;color:var(--ink);background:#fff;box-shadow:0 3px 0 var(--line);line-height:1.35}
.cp-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.cp-btn:disabled{opacity:.45;cursor:default;transform:none}
.cp-main{color:#fff;background:linear-gradient(180deg,#953041,var(--red));box-shadow:0 5px 0 var(--redsh),0 10px 18px rgba(122,36,48,.25);font-size:18px;padding:15px 10px}
.cp-main:active{box-shadow:0 2px 0 var(--redsh)}
.cp-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:340px;margin:0 auto 10px}
.cp-row .cp-btn{margin:0;font-size:14.5px}
.cp-link{display:block;margin:4px auto 0;border:0;background:none;color:var(--red);font-weight:900;font-size:14.5px;cursor:pointer;padding:8px;text-decoration:underline;text-underline-offset:4px}
.cp-small{font-size:12.5px;font-weight:700;color:var(--sub);margin:8px 0 0;line-height:1.7}

/* شاشة البداية */
.cp-panel{position:relative;border-radius:24px;padding:24px 16px 22px;text-align:center;overflow:hidden;background:var(--sand);box-shadow:0 14px 34px rgba(43,29,20,.14)}
.cp-hero{display:flex;align-items:center;justify-content:center;gap:6px;margin:6px auto 12px;max-width:320px;background:var(--paper);border:2px solid var(--line);border-radius:18px;
    padding:12px 10px;box-shadow:0 6px 14px rgba(43,29,20,.10);animation:cp-bob 3.2s ease-in-out infinite}
.cp-hero-q{font-size:30px;font-weight:900;color:var(--gold);line-height:1}
.cp-hero-t{font-size:19px;font-weight:900;color:var(--ink)}
.cp-hero-t i{font-style:normal;display:inline-block;min-width:44px;padding:2px 6px;margin:0 2px;border-radius:10px;border:2px dashed var(--gold);color:var(--red);background:#FFF6E2}
.cp-title{font-size:36px;font-weight:900;margin:0;color:var(--red)}
.cp-tag{margin:4px 0 16px;color:var(--sub);font-weight:800;font-size:15.5px;line-height:1.8}
.cp-line{min-height:22px;margin:0 0 10px;font-weight:800;font-size:14px;color:var(--red)}
.cp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-width:340px;margin:10px auto 0}
.cp-stats:empty{display:none}
.cp-stat{background:#fff;border-radius:12px;padding:8px 2px;box-shadow:0 2px 0 var(--line)}
.cp-stat b{display:block;font-size:20px;font-weight:900;font-variant-numeric:tabular-nums}
.cp-stat small{display:block;font-size:11px;font-weight:800;color:var(--sub)}

/* ساحة اللعب */
.cp-stage{position:relative;display:flex;flex-direction:column;min-height:560px;border-radius:24px;padding:10px;background:var(--sand);box-shadow:0 14px 34px rgba(43,29,20,.14);overflow:hidden}
.cp-top{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.cp-ico{flex:0 0 42px;width:42px;height:42px;border:0;border-radius:14px;background:#fff;font-size:19px;cursor:pointer;box-shadow:0 2px 0 var(--line);color:var(--ink)}
.cp-top-mid{flex:1;min-width:0;text-align:center;line-height:1.3}
.cp-top-mid b{display:block;font-size:16px;font-weight:900;color:var(--red)}
.cp-top-mid small{display:block;font-size:12.5px;font-weight:800;color:var(--sub)}
.cp-fresh{margin:8px 0 0;background:#DCFCE7;color:#14532D;border-radius:12px;padding:8px 10px;font-weight:900;font-size:14px;text-align:center}
.cp-fresh button{border:0;background:#15803D;color:#fff;border-radius:999px;padding:4px 12px;font-weight:900;margin-inline-start:6px;cursor:pointer}
.cp-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:10px;padding:10px 2px 4px}
.cp-body>*{flex-shrink:0}   /* بدونها بطاقة المثل تنضغط وتختفي لما تكثر المحاولات */

/* المثل */
.cp-card{position:relative;background:var(--paper);border:2px solid var(--line);border-radius:18px;padding:14px 12px 14px;box-shadow:0 6px 16px rgba(43,29,20,.08);overflow:hidden}
.cp-proverb{text-align:center;font-size:22px;font-weight:900;line-height:2.15;color:var(--ink);word-spacing:1px}
.cp-pre::before{content:'«';color:var(--gold);margin-inline-end:4px}
.cp-proverb::after{content:'»';color:var(--gold);margin-inline-start:4px}
.cp-slot{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;min-width:76px;height:44px;margin:2px 1px;padding:0 12px;border-radius:12px;
    font-size:19px;font-weight:900;line-height:1;border:2px dashed var(--gold);background:#FFF6E2;color:var(--sub);cursor:default}
.cp-slot.empty{color:#B9A68A}
.cp-slot.next{border-style:solid;border-color:var(--red);animation:cp-pulse 1.4s ease-in-out infinite}
.cp-slot.full{border:2px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;box-shadow:0 3px 0 #000}
.cp-slot.full.known{border-color:var(--csh);background:var(--c);box-shadow:0 3px 0 var(--csh)}   /* كلمة عرفت إنها صح في هالمكان */
.cp-slot.won{border:2px solid var(--csh);background:var(--c);color:#fff;box-shadow:0 3px 0 var(--csh)}
.cp-slot.reveal{border:2px solid var(--red);background:#FDECEC;color:var(--red)}
.cp-slot.ok{animation:cp-ok .5s ease both}
.cp-slot.shake{animation:cp-shake .45s ease both}
.cp-slot:disabled{opacity:1}

/* التلميح */
.cp-hint-box{background:#FFF7DB;border:2px dashed var(--gold);border-radius:14px;padding:9px 12px;font-weight:800;font-size:14.5px;line-height:1.75;text-align:center}
.cp-hint-2{margin-top:4px;padding-top:4px;border-top:1px dashed #E8CF94;font-weight:900;color:var(--red)}

/* المحاولات */
.cp-rows{display:flex;flex-direction:column;gap:6px}
.cp-rows:empty{display:none}
.cp-r{display:flex;align-items:center;justify-content:center;gap:6px}
.cp-r.new{animation:cp-pop .3s ease both}
.cp-r.ph{display:none}
.cp-r.ph .cp-r-n{opacity:.5}
.cp-chip.cp-e{min-width:62px;height:31px;border:2px dashed #E3D3B8;background:transparent;box-shadow:none}
@media(min-height:740px){.cp-r.ph{display:flex}}   /* الجوالات الطويلة والكمبيوتر: نوري المحاولات الباقية بدل الفراغ */
.cp-r-n{flex:0 0 22px;height:22px;border-radius:50%;background:#EFE4D2;color:var(--sub);font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center}
.cp-chip{display:inline-block;padding:6px 12px;border-radius:10px;font-size:15px;font-weight:900;line-height:1.25;color:#fff}
.cp-chip.cp-c{background:var(--c);box-shadow:0 2px 0 var(--csh)}
.cp-chip.cp-p{background:var(--p);color:#3A2405;box-shadow:0 2px 0 var(--psh)}
.cp-chip.cp-a{background:var(--a);box-shadow:0 2px 0 var(--ash)}

/* الكلمات */
.cp-play{margin-top:auto;padding-top:2px}
.cp-left{text-align:center;font-size:13.5px;font-weight:800;color:var(--sub);margin-bottom:8px}
.cp-left.last{color:var(--red);font-weight:900}
.cp-left.say{display:table;margin:0 auto 8px;background:var(--ink);color:#fff;border-radius:999px;padding:5px 14px;font-weight:900;animation:cp-pop .25s ease both}   /* رد المحاولة يطلع فوق الكلمات مباشرة */
.cp-bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:12px}
.cp-tile{flex:0 1 auto;min-width:64px;border:2px solid transparent;border-radius:999px;background:#fff;color:var(--ink);padding:12px 16px;font-size:17px;font-weight:900;cursor:pointer;
    box-shadow:0 3px 0 var(--line);line-height:1.25;transition:background .12s,color .12s,transform .12s,opacity .12s}
.cp-tile:active{transform:scale(.96)}
.cp-tile.used{opacity:.28;border-style:dashed;border-color:var(--line);box-shadow:none;cursor:default}
.cp-tile.k-a{background:#E9E4DC;color:#9A8F82;box-shadow:0 3px 0 #D6CEC2;text-decoration:line-through;text-decoration-thickness:2px}
.cp-tile.k-p{border-color:var(--p);box-shadow:0 3px 0 var(--psh)}
.cp-tile.k-c{border-color:var(--c);box-shadow:0 3px 0 var(--csh)}
.cp-acts{display:grid;grid-template-columns:1fr 1.6fr;gap:8px;max-width:360px;margin:0 auto}
.cp-acts .cp-btn{margin:0}
.cp-sm{font-size:15px;padding:12px 6px}
.cp-main.cp-sm{font-size:16px;padding:12px 6px}

/* النهاية */
.cp-end{text-align:center;margin-top:2px}
.cp-end-e{font-size:44px;line-height:1.1}
.cp-end-h{font-size:24px;font-weight:900;color:var(--red);margin:2px 0}
.cp-end-t{font-size:15px;font-weight:800;color:var(--sub);line-height:1.8;margin:2px auto 10px;max-width:380px}
.cp-learn{display:grid;gap:8px;max-width:400px;margin:0 auto 12px;text-align:right}
.cp-learn>div{background:#fff;border-radius:14px;padding:10px 12px;box-shadow:0 2px 0 var(--line)}
.cp-learn b{display:block;font-size:14px;font-weight:900;color:var(--red);margin-bottom:2px}
.cp-learn p{margin:0;font-size:15px;font-weight:700;line-height:1.8;color:var(--ink)}
.cp-end .la3-story-btn{max-width:340px;margin:0 auto 10px}
.cp-next{font-size:13.5px;font-weight:800;color:var(--sub);margin:4px 0 0;font-variant-numeric:tabular-nums}
.cp-report{display:inline-block;margin-top:10px;font-size:12.5px;font-weight:800;color:var(--sub);text-decoration:underline;text-underline-offset:3px}
.cp-empty{text-align:center;margin:auto 0}
.cp-toast{position:absolute;left:50%;top:62px;transform:translateX(-50%);   /* فوق، عشان ما يغطي الكلمات اللي بيضغطها */z-index:5;background:rgba(43,29,20,.94);color:#fff;border-radius:999px;padding:9px 16px;font-weight:900;font-size:14.5px;
    white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;box-shadow:0 8px 20px rgba(0,0,0,.2);pointer-events:none}
.cp-toast.on{animation:cp-toast .3s ease both}

/* النوافذ */
.cp-modal{position:fixed;inset:0;z-index:100002;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(43,29,20,.55)}   /* وسط الشاشة دايماً، فوق شريط الموقع */
.cp-mcard{position:relative;width:100%;max-width:400px;max-height:100%;overflow:auto;background:var(--sand);color:var(--ink);border-radius:22px;padding:20px 16px 14px;text-align:center;
    box-shadow:0 22px 44px rgba(0,0,0,.35);animation:cp-pop .35s cubic-bezier(.2,1.4,.4,1) both}
.cp-mcard-h{font-size:21px;font-weight:900;margin:2px 0 12px;color:var(--red)}
.cp-how{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:8px;text-align:right}
.cp-how li{display:flex;gap:10px;align-items:flex-start;background:#fff;border-radius:14px;padding:10px 12px;font-size:15px;font-weight:800;line-height:1.75;box-shadow:0 2px 0 var(--line)}
.cp-how li span{font-size:24px;line-height:1.2}
.cp-how .cp-k{flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900;color:#fff}
.cp-k.cp-c{background:var(--c)}.cp-k.cp-p{background:var(--p);color:#3A2405}.cp-k.cp-a{background:var(--a)}
.cp-alist{display:grid;gap:8px}
.cp-arow{display:flex;align-items:center;gap:10px;border:0;border-radius:14px;background:#fff;padding:12px;cursor:pointer;box-shadow:0 2px 0 var(--line);color:var(--ink);text-align:right}
.cp-arow-n{font-weight:900;color:var(--red);min-width:34px}
.cp-arow-d{flex:1;font-weight:800}
.cp-arow-s{font-weight:900;font-size:13.5px}

@keyframes cp-pop{0%{opacity:0;transform:translateY(8px) scale(.94)}100%{opacity:1;transform:none}}
@keyframes cp-ok{0%{transform:none}40%{transform:translateY(-6px) scale(1.06)}100%{transform:none}}
@keyframes cp-shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes cp-toast{0%{opacity:0;transform:translate(-50%,6px)}100%{opacity:1;transform:translate(-50%,0)}}
@keyframes cp-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes cp-pulse{0%,100%{box-shadow:0 0 0 0 rgba(122,36,48,.0)}50%{box-shadow:0 0 0 4px rgba(122,36,48,.18)}}

/* ملء الشاشة على الجوال */
.game-focus-shell.is-focus #cp-game{max-width:none;height:100%;padding:0;display:flex;flex-direction:column}
.game-focus-shell.is-focus .cp-panel{flex:1;border-radius:0;overflow-y:auto;padding-top:calc(60px + env(safe-area-inset-top,0px))}
.game-focus-shell.is-focus .cp-panel .cp-sadu{margin-top:calc(-60px - env(safe-area-inset-top,0px));margin-bottom:56px}
.game-focus-shell.is-focus .cp-stage{flex:1;min-height:0;border-radius:0;padding:calc(8px + env(safe-area-inset-top,0px)) 10px calc(12px + env(safe-area-inset-bottom,0px))}
.game-focus-shell.is-focus .cp-top{padding-left:46px}   /* زر «إنهاء ملء الشاشة» أعلى اليسار */
/* شريط «العب التالي» يطلع أسفل الشاشة بعد النهاية: نخلي له مكان عشان ما يغطي أزرارنا */
html.la3-next-open .game-focus-shell.is-focus .cp-stage{padding-bottom:calc(118px + env(safe-area-inset-bottom,0px))}
.game-focus-shell.is-focus .cp-toast{top:calc(62px + env(safe-area-inset-top,0px))}

@media(max-width:380px){
    .cp-proverb{font-size:20px}
    .cp-slot{min-width:66px;font-size:17.5px;padding:0 9px;height:42px}
    .cp-tile{font-size:15.5px;padding:11px 12px;min-width:58px}
    .cp-title{font-size:31px}
    .cp-chip{font-size:14px;padding:5px 10px}
}
@media(min-width:768px){.cp-stage{min-height:600px;padding:14px}.cp-proverb{font-size:24px}}
@media(min-height:700px){.cp-bank{gap:10px}.cp-tile{padding:14px 18px;font-size:18px}}   /* الجوالات الطويلة: كلمات أكبر بدل فراغ */
@media(prefers-reduced-motion:reduce){.cp-r.new,.cp-slot.ok,.cp-slot.shake,.cp-slot.next,.cp-mcard,.cp-hero,.cp-toast.on{animation-duration:.01s;animation-iteration-count:1}}