:root{--accent:#e3b75a;--gold:#e3b75a;--R:#4c8dff;--L:#ff4d5e;--hit:#ff7a45;--kill:#b06cff;--heal:#3ddc97;--shield:#49c6ff;--trap:#ffc93c;--card:#151a2c;--line:rgba(255,255,255,.09)}
[hidden]{display:none!important}
body{overflow-x:hidden;background:radial-gradient(circle at 100% 0,rgba(76,141,255,.2),transparent 34%),radial-gradient(circle at 0 0,rgba(255,77,94,.18),transparent 34%),radial-gradient(circle at 50% 110%,rgba(227,183,90,.12),transparent 40%),#07080f}
body.quake .nobles-page{animation:quake .45s ease}
.nobles-page{width:min(100%,640px);padding:max(12px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom))}
.game-brand-line{margin-bottom:8px}
.nobles-page .game-header{position:sticky;top:0;z-index:15;margin:0 -14px;padding:max(6px,env(safe-area-inset-top)) 14px 6px;background:linear-gradient(180deg,rgba(7,8,15,.96),rgba(7,8,15,.82));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.game-title h1{font-size:19px;font-weight:950;background:linear-gradient(90deg,#fff3d1,var(--gold),#fff3d1);-webkit-background-clip:text;background-clip:text;color:transparent;}
.game-title p{font-size:10px}
.game-title h1.alt-name{background:linear-gradient(90deg,#ff7a86,#ffd36b,#7fb0ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 8px rgba(255,120,140,.35))}
.game-title h1.contact-name{font-size:16px;background:linear-gradient(90deg,#9fd8ff,#2aabee,#9fd8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.game-title h1.contact-name a{direction:ltr;unicode-bidi:isolate;color:#5cc1ff;-webkit-text-fill-color:#5cc1ff;text-decoration:none;font-weight:950}
.game-title h1.name-swap{animation:nameSwap .7s ease}
@keyframes nameSwap{0%{opacity:0;transform:translateY(6px) scale(.92);filter:blur(3px)}100%{opacity:1;transform:none;filter:none}}
.header-tools{display:flex;gap:5px;flex:none}
.header-tools .sound{width:36px;height:36px;border-radius:11px}
.zoom-btn{font-size:19px;font-weight:900;line-height:1}
.zoom-btn:disabled{opacity:.35}
.zoom-toast{position:absolute;top:calc(100% + 4px);left:14px;border-radius:99px;padding:3px 10px;background:rgba(20,25,42,.95);border:1px solid rgba(227,183,90,.4);color:var(--gold);font-size:12px;font-weight:900;direction:ltr;pointer-events:none;animation:rise .2s ease}
.zoom-wrap{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}
.nobles-page .setup-screen,.nobles-page .battle-screen{zoom:var(--nw-zoom,1);width:var(--nw-base,auto);margin-inline:auto}
body.zoomed .setup-screen,body.zoomed .battle-screen{margin-inline:0}
svg{display:block;width:100%;height:100%}
.mini-icon{display:inline-block;flex:none;width:16px;height:16px}
button{cursor:pointer}

/* ---------- التجهيز ---------- */
.setup-screen{margin-top:16px}
.setup-armies{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);gap:8px;align-items:start}
.setup-army{--team:var(--R);position:relative;display:grid;gap:9px;border:1px solid color-mix(in srgb,var(--team) 35%,transparent);border-radius:22px;padding:16px 11px 12px;background:linear-gradient(180deg,color-mix(in srgb,var(--team) 14%,#111524),#0f1220 70%);box-shadow:0 18px 40px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06);text-align:center}
.setup-army[data-team="L"]{--team:var(--L)}
.crest{display:grid;place-items:center;width:62px;height:62px;margin:0 auto;border-radius:20px;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--team) 45%,#1b2033),#0d101b);border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);box-shadow:0 0 28px color-mix(in srgb,var(--team) 35%,transparent);color:var(--gold)}
.crest .crest-icon{width:38px;height:38px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.crest{position:relative;cursor:pointer;overflow:visible}
.crest .crest-icon.has-logo,.commander-badge .crest-icon.has-logo,.starter-option .crest-icon.has-logo{width:100%;height:100%;filter:none}
.crest-icon img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.crest .crest-icon.has-logo{border-radius:19px;overflow:hidden}
.commander-badge .crest-icon.has-logo{border-radius:10px;overflow:hidden}
.starter-option .crest-icon.has-logo{width:46px;height:46px;border-radius:14px;overflow:hidden}
.crest-cam{position:absolute;bottom:-6px;left:-6px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#141829;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);font-size:12px;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.crest-reset{justify-self:center;margin-top:4px;border:0;background:none;color:#8b93a7;font:inherit;font-size:10px;font-weight:700;text-decoration:underline;cursor:pointer}
.side-tag{color:color-mix(in srgb,var(--team) 70%,#fff);font-size:10px;font-weight:900}
.commander-input,.soldier-form input,.start-points input,.value-row input{width:100%;min-width:0;border:1px solid var(--line);border-radius:13px;padding:10px 11px;background:#0a0d17;color:#fff;font:inherit;font-size:14px;text-align:center;outline:0;transition:border-color .2s,box-shadow .2s}
.commander-input{font-weight:900;font-size:15px;border-color:color-mix(in srgb,var(--gold) 35%,transparent)}
.commander-input:focus,.soldier-form input:focus,.start-points input:focus,.value-row input:focus{border-color:var(--team,var(--gold));box-shadow:0 0 0 3px color-mix(in srgb,var(--team,var(--gold)) 22%,transparent)}
.soldier-form{display:grid;grid-template-columns:1fr 38px;gap:6px}
.soldier-form input{font-size:13px;padding:9px}
.soldier-form button{border:0;border-radius:12px;background:var(--team);color:#fff;font-size:20px;font-weight:900;line-height:1}
.soldier-form.full button{opacity:.35;pointer-events:none}
.soldier-list{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none;max-height:230px;overflow:auto}
.soldier-list li{display:flex;align-items:center;gap:7px;border-radius:11px;padding:6px 8px;background:rgba(9,11,20,.8);border:1px solid rgba(255,255,255,.06);font-size:12px;animation:rise .25s ease}
.soldier-list li .mini-soldier{flex:none;width:20px;height:26px;color:var(--team)}
.soldier-list li b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-weight:700}
.soldier-list li button{border:0;background:none;color:#7f879b;font-size:17px;line-height:1;padding:0 2px}
.soldier-list li.empty{justify-content:center;color:#5d667b;background:none;font-size:11px}
.setup-vs{display:grid;place-items:center;height:62px;margin-top:16px}
.setup-vs span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(145deg,#f3d48c,#b8862f);color:#1a1206;font-size:11px;font-weight:1000;box-shadow:0 0 22px rgba(227,183,90,.45)}

.settings{margin-top:14px;border:1px solid var(--line);border-radius:18px;background:rgba(15,18,32,.85);overflow:hidden}
.settings summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 15px;list-style:none;cursor:pointer;font-size:13px;font-weight:850}
.settings summary::-webkit-details-marker{display:none}
.settings summary small{color:var(--gold);font-size:11px}
.start-points{display:grid;grid-template-columns:1fr 110px;align-items:center;gap:10px;padding:0 15px 12px;color:#c9cede;font-size:12px;font-weight:700}
.values-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;padding:0 12px 10px}
.values-grid h3{grid-column:1/-1;margin:8px 2px 2px;color:var(--gold);font-size:12px}
.value-row{display:grid;grid-template-columns:18px 1fr auto 52px 22px;align-items:center;gap:5px;border-radius:12px;padding:5px 7px;background:rgba(255,255,255,.035);font-size:12px}
.value-row .mini-icon{color:var(--k)}.value-row b{font-weight:800}
.value-row .sign{color:var(--k);font-weight:900}
.value-row input{padding:5px 3px;font-size:13px;border-radius:9px}
.value-row em{grid-column:span 2;color:#8b93a7;font-style:normal;font-size:10px;text-align:center}
.value-row small{color:#5f677b;font-size:9px}
.ghost{border:1px solid var(--line);border-radius:13px;padding:10px 14px;background:rgba(255,255,255,.04);color:#cfd3e2;font:inherit;font-size:12px;font-weight:800}
.settings .ghost{display:block;margin:0 auto 13px}

.play-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:16px;border:0;border-radius:18px;padding:16px;background:linear-gradient(135deg,#f6d993,#d39e3d 55%,#a8721f);color:#1b1205;font:inherit;font-size:19px;font-weight:1000;box-shadow:0 14px 34px rgba(211,158,61,.35),inset 0 1px 0 rgba(255,255,255,.6);overflow:hidden}
.play-btn:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:shine 2.8s ease-in-out infinite}
.play-btn:active{transform:scale(.98)}
.setup-hint{margin:12px 6px 0;color:#6c7488;font-size:11px;line-height:1.8;text-align:center}

/* ---------- الجيوش ---------- */
.battle-screen{margin-top:12px}
.armies{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.army{--team:var(--R);position:relative;border:1px solid color-mix(in srgb,var(--team) 28%,transparent);border-radius:18px;padding:9px 9px 8px;background:linear-gradient(180deg,color-mix(in srgb,var(--team) 12%,#10131f),#0d101b);transition:transform .3s,box-shadow .3s,border-color .3s;min-width:0}
.army[data-army="L"]{--team:var(--L)}
.army.active{border-color:var(--team);box-shadow:0 0 0 1px var(--team),0 0 26px color-mix(in srgb,var(--team) 40%,transparent);transform:translateY(-2px)}
.army-head{display:flex;align-items:center;gap:7px}
.roster-edit{flex:none;display:grid;place-items:center;width:28px;height:28px;margin-inline-start:auto;border:1px solid color-mix(in srgb,var(--team) 40%,transparent);border-radius:9px;background:rgba(255,255,255,.05);font-size:13px;line-height:1;padding:0;cursor:pointer}
.roster-edit:active{transform:scale(.9)}
.roster-edit:disabled{opacity:.35}
.roster-card{--team:var(--R);text-align:center}
.roster-card.team-L{--team:var(--L)}
.roster-card h2{color:color-mix(in srgb,var(--team) 70%,#fff)}
.roster-card .soldier-form{margin:4px 0 10px}
.roster-list{max-height:46vh}
.roster-list li.dead b{color:#6b7286;text-decoration:line-through}
.roster-list li .state{flex:none;color:#c9b4ff;font-size:10px;font-weight:800}
.commander-badge{display:grid;place-items:center;flex:none;width:38px;height:38px;overflow:hidden;border-radius:11px;background:color-mix(in srgb,var(--team) 22%,#0b0e18);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);color:var(--gold)}
.commander-badge .crest-icon{width:22px;height:22px}
.army-id{display:grid;min-width:0;flex:1}
/* ---------- الملك (القائد) ---------- */
.king{flex:none;width:44px;height:58px;margin:-9px -2px -9px;color:var(--team)}
.army-head>.commander-badge{order:0}.army-head>.army-id{order:1}.army-head>.king{order:2}.army-head>.roster-edit{order:3;margin-inline-start:0}.army-head>.shield-chip,.army-head>.revive-chip{order:4}
.king svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));transform-origin:50% 100%;animation:kingIdle 3s ease-in-out infinite}
.king .king-arm{transform-box:view-box;transform-origin:48.5px 32px;transition:transform .4s}
.king .king-crown{transform-box:view-box;transform-origin:32px 8px}
@keyframes kingIdle{50%{transform:scaleY(1.025)}}
.army.active .king svg{animation:kingHop .9s ease-in-out infinite;filter:drop-shadow(0 0 8px var(--team)) drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.army.active .king .king-arm{animation:kingSword .9s ease-in-out infinite alternate}
.army.active .king .king-crown{animation:crownGlint 1.8s ease-in-out infinite}
@keyframes kingHop{0%,100%{transform:translateY(0)}40%{transform:translateY(-4px) rotate(-2deg)}}
@keyframes kingSword{from{transform:rotate(-30deg)}to{transform:rotate(-150deg)}}
@keyframes crownGlint{0%,100%{filter:none}50%{filter:brightness(1.6) drop-shadow(0 0 4px #ffe07a)}}
.army-id b{overflow-wrap:anywhere;line-height:1.15;font-size:12.5px;font-weight:950}
.turn-chip{width:max-content;margin-top:2px;border-radius:99px;padding:1px 8px;background:var(--team);color:#fff;font-size:9px;font-weight:900;opacity:0;transform:scale(.8);transition:.25s}
.army.active .turn-chip{opacity:1;transform:none;animation:pulse 1.4s ease-in-out infinite}
.revive-chip{display:flex;align-items:center;gap:1px;height:24px;border-radius:99px;padding:0 7px;background:rgba(255,111,174,.16);border:1px solid rgba(255,111,174,.55);color:#ff6fae;font-size:13px;font-weight:950;box-shadow:0 0 10px rgba(255,111,174,.35);animation:rise .35s ease}
.revive-chip b{font-size:11px;direction:ltr}
.shield-chip{display:grid;place-items:center;width:26px;height:26px;color:var(--shield);filter:drop-shadow(0 0 8px var(--shield));animation:rise .35s ease}
.shield-chip .crest-icon{width:22px;height:22px}
.hp{position:relative;height:20px;margin:8px 0 7px;border-radius:99px;background:#070910;border:1px solid var(--line);overflow:visible}
.hp-fill{position:absolute;inset:0 0 0 auto;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--team) 60%,#000),var(--team));box-shadow:0 0 14px color-mix(in srgb,var(--team) 55%,transparent);transition:width .7s cubic-bezier(.2,.9,.3,1)}
.army[data-army="L"] .hp-fill{inset:0 auto 0 0;background:linear-gradient(270deg,color-mix(in srgb,var(--team) 60%,#000),var(--team))}
.army.low .hp-fill{animation:danger 1s ease-in-out infinite}
.hp-text{position:absolute;inset:0;display:grid;place-items:center;direction:ltr;font-size:11px;font-weight:950;text-shadow:0 1px 3px #000}
.float{position:absolute;top:-6px;left:50%;z-index:3;direction:ltr;font-size:20px;font-weight:1000;pointer-events:none;animation:floatUp 1.15s ease-out forwards}
.float.minus{color:#ff6b6b;text-shadow:0 0 12px rgba(255,80,80,.7)}
.float.plus{color:var(--heal);text-shadow:0 0 12px rgba(61,220,151,.7)}
.troop-count{display:block;margin:-2px 0 4px;color:#8a92a6;font-size:10px;font-weight:700}
.troops{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:4px 2px;margin:0;padding:0;list-style:none}
.troops li{display:grid;justify-items:center;gap:1px;min-width:0;color:var(--team);transition:filter .4s,opacity .4s}
.troops .figure{position:relative;width:30px;height:40px}
.troops .figure svg{filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
.troops li b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f2f4fa;font-size:9.5px;font-weight:800;border-radius:6px;padding:1px 5px;background:rgba(7,9,17,.82);border:1px solid color-mix(in srgb,var(--team) 35%,transparent);box-shadow:0 2px 6px rgba(0,0,0,.45);text-shadow:none}
.troops li.dead .figure svg{filter:grayscale(1) brightness(.45);transform:rotate(-78deg) translate(-8px,6px) scale(.86);transition:transform .5s}
.troops li.dead b{color:#5d6477;text-decoration:line-through}
.troops .rip{position:absolute;top:2px;right:0;width:18px;height:18px;color:#c9b4ff;filter:drop-shadow(0 0 5px rgba(176,108,255,.9))}
.troops li.just-died .figure{animation:die .9s ease}
.troops li.just-revived .figure{animation:revive 1s ease}
.troops .no-troops{grid-column:1/-1;justify-items:start;color:#626a7e;font-size:10px;font-weight:600}
.army.hit{animation:shake .5s ease}
/* ---------- لهب (الأحمر) وصقيع (الأزرق) ---------- */
.fx{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0}
.army>:not(.fx),.setup-army>:not(.fx){position:relative;z-index:1}
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fx-fire{background:radial-gradient(130% 45% at 50% 112%,rgba(255,110,20,.38),rgba(200,30,20,.12) 50%,transparent 75%);box-shadow:inset 0 -14px 26px -14px rgba(255,120,30,.55)}
.army.active .fx-fire{box-shadow:inset 0 -20px 34px -12px rgba(255,140,40,.75)}
.fx-ice{background:linear-gradient(180deg,rgba(190,230,255,.1),transparent 40%,rgba(160,215,255,.08));box-shadow:inset 0 0 22px rgba(190,232,255,.32),inset 0 0 2px rgba(255,255,255,.65)}
.fx-ice:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(110deg,transparent 35%,rgba(225,247,255,.16) 50%,transparent 65%);transform:translateX(-120%);animation:frostShine 6s ease-in-out infinite}
.fx-ice b{position:absolute;z-index:2;top:-1px;left:var(--x);width:var(--w);height:var(--h);background:linear-gradient(90deg,rgba(150,205,250,.35),rgba(255,255,255,.95) 38%,rgba(200,235,255,.7) 55%,rgba(120,180,240,.35));clip-path:polygon(0 0,100% 0,72% 45%,58% 78%,50% 100%,42% 76%,26% 40%);filter:drop-shadow(0 0 2px rgba(180,230,255,.9))}
.fx-ice b:after{content:"";position:absolute;left:50%;top:100%;width:3px;height:4px;margin-left:-1.5px;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;background:rgba(220,245,255,.95);box-shadow:0 0 3px rgba(190,235,255,.9);opacity:0;animation:drip var(--d) ease-in var(--delay) infinite}
@keyframes frostShine{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes drip{0%,70%{opacity:0;transform:translateY(-4px) scale(.4)}78%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(70px) scale(.8)}}
.army.active .fx-ice{box-shadow:inset 0 0 30px rgba(200,238,255,.5),inset 0 0 3px rgba(255,255,255,.8)}
.army.hit:before,.army.healed:before,.army.blocked:before,.army.shielded:before{z-index:2;content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;animation:flash .8s ease forwards}
.army.hit:before{background:radial-gradient(circle,rgba(255,90,60,.45),transparent 70%)}
.army.healed:before{background:radial-gradient(circle,rgba(61,220,151,.4),transparent 70%)}
.army.blocked:before,.army.shielded:before{background:radial-gradient(circle,rgba(73,198,255,.45),transparent 70%)}

/* ---------- اللوحة ---------- */
.board{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;margin-top:12px;padding:5px;border:1px solid rgba(227,183,90,.22);border-radius:20px;background:radial-gradient(circle at 50% 50%,rgba(227,183,90,.08),transparent 60%),#0a0c16;box-shadow:inset 0 0 40px rgba(0,0,0,.5),0 18px 50px rgba(0,0,0,.35)}
.war-card{position:relative;aspect-ratio:1/1;border:0;padding:0;background:none;perspective:400px;min-width:0}
.war-card.deal{animation:deal .45s cubic-bezier(.2,.9,.3,1.3) both}
.card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.3,.9,.3,1.1)}
.war-card.open .card-inner{transform:rotateY(180deg)}
.card-back,.card-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:clamp(6px,1.8vw,10px);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.card-back{border:1px solid rgba(227,183,90,.4);background:repeating-linear-gradient(45deg,rgba(227,183,90,.07) 0 3px,transparent 3px 7px),linear-gradient(150deg,#232a44,#121628);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 3px 8px rgba(0,0,0,.35)}
.card-back,.card-face{grid-template-rows:1fr auto;padding:7% 4% 4%}
.weapon-art{display:block;width:100%;height:100%;min-height:0}
.weapon-art svg{width:100%;height:100%}
.card-back .weapon-art{filter:drop-shadow(0 3px 3px rgba(0,0,0,.65))}
.card-back{background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.09),transparent 65%),linear-gradient(150deg,#2a3150,#141829)}
.numbered .card-back{border:0;box-shadow:0 3px 8px rgba(0,0,0,.35);background:repeating-linear-gradient(45deg,rgba(227,183,90,.08) 0 3px,transparent 3px 8px),radial-gradient(circle at 50% 40%,#3a2f17,#16131c 75%);grid-template-rows:1fr}
.card-number{font-size:clamp(13px,4.2vw,24px);font-weight:1000;line-height:1;background:linear-gradient(180deg,#fff3c8,#e3b75a 55%,#9c6b1f);-webkit-background-clip:text;background-clip:text;color:transparent}
.card-back i,.card-face i{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;color:#f1d79b;font-size:clamp(5.5px,1.55vw,9px);font-weight:900;line-height:1.25;text-shadow:0 1px 3px #000}
.card-face i{color:var(--k)}
.war-card:not(:disabled):hover .card-back,.war-card:not(:disabled):focus-visible .card-back{border-color:var(--gold);box-shadow:0 0 14px rgba(227,183,90,.45);transform:translateY(-2px)}
.numbered:not(:disabled):hover .card-back,.numbered:not(:disabled):focus-visible .card-back{border:0;box-shadow:0 0 14px rgba(227,183,90,.45)}
.war-card:not(:disabled):active .card-back{transform:scale(.93)}
.card-face .weapon-art{display:grid;place-items:center}
.face-badge{direction:ltr;max-width:100%;overflow:hidden;white-space:nowrap;color:var(--k);font-size:clamp(8px,2.6vw,14px);font-weight:1000;text-shadow:0 0 10px color-mix(in srgb,var(--k) 60%,transparent)}
.card-face i{color:#cfd3df!important;font-weight:800!important}
.card-face{transform:rotateY(180deg);border:1px solid color-mix(in srgb,var(--k) 55%,transparent);background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--k) 28%,#141826),#0c0f1a);color:var(--k)}
.war-card.by-R .card-face{box-shadow:inset 0 -3px 0 var(--R)}
.war-card.by-L .card-face{box-shadow:inset 0 -3px 0 var(--L)}
.war-card.open{cursor:default}
.war-card.flipping .card-face{animation:glow .5s ease}
.kind-hit{--k:var(--hit)}.kind-double{--k:#ff3d3d}.kind-kill{--k:var(--kill)}.kind-revive{--k:#ff6fae}.kind-heal{--k:var(--heal)}.kind-shield{--k:var(--shield)}.kind-trap{--k:var(--trap)}.kind-self{--k:#ffb03a}.kind-skip{--k:#9aa3b8}.kind-cmdkill{--k:#ff3d3d}.kind-cmdself{--k:#ffb03a}

/* ---------- النتيجة بالنص ---------- */
.result-surprise:not(.is-surprise){background:rgba(255,255,255,.08)!important;color:#c9cede!important;animation:none!important}
.result{grid-area:2/3/12/9;padding:0 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;text-align:center}
.result-turn{display:grid;justify-items:center;gap:1px;max-width:100%}
.result-square{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1/1;border:1px solid rgba(227,183,90,.35);border-radius:14px;padding:6px;background:radial-gradient(circle at 50% 35%,rgba(227,183,90,.16),transparent 70%),#0e1120;box-shadow:0 8px 24px rgba(0,0,0,.4);overflow:hidden}
.result.kind-hit .result-square,.result.kind-kill .result-square,.result.kind-heal .result-square,.result.kind-shield .result-square,.result.kind-trap .result-square,.result.kind-revive .result-square,.result.kind-double .result-square,.result.kind-self .result-square,.result.kind-cmdkill .result-square,.result.kind-cmdself .result-square,.result.kind-skip .result-square{border-color:color-mix(in srgb,var(--k) 55%,transparent);background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--k) 22%,transparent),transparent 70%),#0e1120}
.result-info{display:grid;justify-items:center;gap:4px;max-width:100%;min-height:0}
.result-info p{margin:0;color:#d5d9e5;font-size:clamp(8.5px,2.3vw,11px);line-height:1.5}
.result-idle,.result-card{display:grid;justify-items:center;align-content:center;gap:2px;width:100%;height:100%}
.result-emblem{width:clamp(30px,9vw,50px);height:clamp(30px,9vw,50px);color:var(--gold);opacity:.9;animation:breathe 2.4s ease-in-out infinite}
.result small{color:#8a92a6;font-size:clamp(9px,2.4vw,11px)}
.result-turn strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(12px,3.4vw,18px);font-weight:1000}
.turn-R{color:var(--R)}.turn-L{color:var(--L)}
.first-note{color:var(--gold)!important;font-weight:800}
.result-idle p{margin:0;color:#c8cddb;font-size:clamp(10px,2.6vw,12px)}
.result-icon{width:clamp(30px,9.5vw,54px);height:clamp(30px,9.5vw,54px);color:var(--k);filter:drop-shadow(0 0 14px color-mix(in srgb,var(--k) 70%,transparent))}
.result-surprise{border-radius:99px;padding:2px 9px;background:linear-gradient(90deg,#b06cff,#ff6fae);color:#fff!important;font-weight:900;animation:pulse 1.2s ease-in-out infinite}
.result-card b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(11px,3vw,16px);font-weight:1000;color:var(--k)}
.result-card strong{direction:ltr;font-size:clamp(16px,5vw,28px);font-weight:1000;line-height:1.1;color:#fff;text-shadow:0 0 18px color-mix(in srgb,var(--k) 80%,transparent)}
.result-card.blocked strong{color:var(--shield)}
.result-surprise{font-size:clamp(8px,2.2vw,10px)!important}
.result-card.pop{animation:pop .55s cubic-bezier(.2,.9,.3,1.4)}
.result-card.pop .result-icon{animation:iconIn .6s cubic-bezier(.2,.9,.3,1.5)}

.battle-log{display:grid;gap:4px;margin:10px 0 0;padding:0;list-style:none}
.battle-log li{border-radius:10px;padding:6px 10px;background:rgba(255,255,255,.035);color:#a9b0c2;font-size:11px;border-inline-start:3px solid var(--R)}
.battle-log li.log-L{border-color:var(--L)}
.battle-log li:first-child{color:#eef0f6;background:rgba(255,255,255,.06);animation:rise .3s ease}
.battle-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}
.battle-actions button{border:1px solid var(--line);border-radius:13px;padding:11px 6px;background:rgba(20,25,42,.85);color:#d8dbe8;font:inherit;font-size:12px;font-weight:800}
.battle-actions button:disabled{opacity:.35}
.nobles-footer{margin-top:18px;text-align:center;color:#4f576b;font-size:9px;font-weight:900;letter-spacing:1px}
.nobles-footer span{color:#353b4b}

/* ---------- النوافذ ---------- */
.modal-card{position:relative;background:linear-gradient(180deg,#1a1f33,#121626)}
.modal-card h2{margin:6px 0}
.modal-card>p{line-height:1.8}
.modal-actions{display:grid;gap:8px}
.modal-actions .primary{background:linear-gradient(135deg,#f6d993,#c58f30);color:#1b1205;box-shadow:0 11px 28px rgba(211,158,61,.3)}
.close-modal{position:absolute;top:12px;left:12px;width:32px;height:32px;border:0;border-radius:10px;background:rgba(255,255,255,.06);color:#c9cdda;font-size:20px}
.rules-card{width:min(100%,400px);max-height:86vh;overflow:auto;text-align:start}
.rules-card h2{text-align:center}
.rules-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.rules-list li{display:grid;grid-template-columns:26px 1fr auto;align-items:center;column-gap:9px;border-radius:12px;padding:8px 10px;background:rgba(255,255,255,.04)}
.rules-list .mini-icon{grid-row:span 2;width:26px;height:26px;color:var(--k)}
.rules-list b{font-size:13px}.rules-list em{direction:ltr;font-style:normal;font-weight:950;color:var(--k)}
.rules-list .rules-head{display:block;margin-top:6px;background:none;color:var(--gold);font-size:12px;font-weight:900;padding:2px 4px}
.rules-list small{grid-column:2/4;color:#8d95a8;font-size:10px}
.winner-modal .trophy{display:block;width:70px;height:70px;margin:0 auto;color:var(--gold);filter:drop-shadow(0 0 20px rgba(227,183,90,.7));animation:iconIn .8s cubic-bezier(.2,.9,.3,1.5)}
.winner-modal small{color:#a7aec0;font-size:12px}
.winner-modal h2{font-size:24px}
.final-teams{display:grid;gap:8px;margin:12px 0 14px}
.final-team{--team:var(--R);display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:10px;border:1px solid color-mix(in srgb,var(--team) 50%,transparent);border-radius:16px;padding:9px 11px;background:linear-gradient(90deg,color-mix(in srgb,var(--team) 20%,#141829),#0f1220);text-align:start}
.final-team.team-L{--team:var(--L)}
.final-team .final-tag{grid-column:1/-1;font-size:12px;font-weight:950;color:var(--gold)}
.final-team.loser .final-tag{color:#ff9aa6}
.final-team.loser{opacity:.82;filter:saturate(.75)}
.final-team .final-logo{width:46px;height:46px;border-radius:13px;overflow:hidden;display:grid;place-items:center;background:color-mix(in srgb,var(--team) 25%,#0b0e18);color:var(--gold)}
.final-team .final-logo svg{width:30px;height:30px}
.final-team .final-logo img{width:100%;height:100%;object-fit:cover}
.final-team b{display:block;font-size:16px;font-weight:950;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.final-team small{display:block;color:color-mix(in srgb,var(--team) 70%,#fff)!important;font-size:11px!important}
.final-team em{font-style:normal;font-weight:1000;font-size:18px;direction:ltr;color:var(--team)}
.war-card.by-X .card-face{box-shadow:inset 0 -3px 0 #8b93a7;opacity:.85}
.win-R h2{color:var(--R)}.win-L h2{color:var(--L)}.win-draw h2{color:var(--gold)}
.winner-modal p{direction:rtl;font-weight:800;color:#d9dce7!important;font-size:13px!important}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-12px;left:var(--x);width:8px;height:14px;border-radius:2px;background:hsl(var(--h) 90% 60%);animation:fall 2.6s linear var(--d) infinite}

.starter-card{width:min(100%,360px)}
.starter-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.starter-option{--team:var(--R);display:grid;justify-items:center;gap:5px;border:1px solid color-mix(in srgb,var(--team) 50%,transparent);border-radius:18px;padding:14px 8px;background:linear-gradient(180deg,color-mix(in srgb,var(--team) 22%,#141829),#0f1220);color:#fff;font:inherit}
.starter-option[data-starter="L"]{--team:var(--L)}
.starter-option .crest-icon{width:34px;height:34px;color:var(--gold)}
.starter-option b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:950}
.starter-option small{color:color-mix(in srgb,var(--team) 70%,#fff);font-size:10px}
.starter-option:active{transform:scale(.96)}
.lot-btn{width:100%;font-size:14px;padding:12px}

.pick-card{width:min(100%,380px)}
.pick-icon{display:block;width:52px;height:52px;margin:0 auto;color:#ff6fae;filter:drop-shadow(0 0 14px rgba(255,111,174,.7));animation:breathe 1.6s ease-in-out infinite}
.pick-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;max-height:52vh;overflow:auto}
.pick-option{display:grid;justify-items:center;gap:4px;border:1px solid color-mix(in srgb,var(--team) 45%,transparent);border-radius:16px;padding:10px 4px 8px;background:linear-gradient(180deg,color-mix(in srgb,var(--team) 16%,#141829),#0f1220);color:var(--team);font:inherit}
.pick-option .figure{width:44px;height:58px}
.pick-option .figure svg{filter:grayscale(1) brightness(.6);transition:filter .3s}
.pick-option:hover .figure svg,.pick-option:focus-visible .figure svg{filter:none}
.kill-mode .pick-icon{color:var(--kill);filter:drop-shadow(0 0 14px rgba(176,108,255,.8))}
.kill-mode .pick-option .figure svg{filter:none}
.kill-mode .pick-option:hover .figure svg,.kill-mode .pick-option:focus-visible .figure svg{filter:grayscale(1) brightness(.5)}
.kill-mode .pick-option{border-color:color-mix(in srgb,var(--kill) 45%,transparent)}
.pick-option b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#eef0f6;font-size:12px}
.pick-option:active{transform:scale(.95)}

/* ---------- الحركات ---------- */
@keyframes deal{from{opacity:0;transform:translateY(-14px) scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes iconIn{0%{transform:scale(0) rotate(-30deg)}100%{transform:none}}
@keyframes glow{50%{filter:brightness(1.8)}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-6px) rotate(-1deg)}40%{transform:translateX(6px) rotate(1deg)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes quake{0%,100%{transform:none}25%{transform:translate(-3px,2px)}50%{transform:translate(3px,-2px)}75%{transform:translate(-2px,-1px)}}
@keyframes flash{from{opacity:1}to{opacity:0}}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,6px) scale(.6)}20%{opacity:1;transform:translate(-50%,-10px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-38px) scale(1)}}
@keyframes die{0%{transform:scale(1);background:rgba(176,108,255,.5)}40%{transform:scale(1.15) rotate(-3deg)}100%{transform:none}}
@keyframes revive{0%{filter:brightness(3) drop-shadow(0 0 10px #ff6fae);transform:translateY(8px) scale(.7)}60%{transform:translateY(-4px) scale(1.1)}100%{filter:none;transform:none}}
@keyframes pulse{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--team) 25%,transparent)}}
@keyframes danger{50%{filter:brightness(1.6) saturate(1.4)}}
@keyframes breathe{50%{transform:scale(1.07);opacity:.7}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes shine{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg)}}
@media (max-width:380px){
  .nobles-page{padding-inline:10px}
  .board{gap:2px;padding:3px}
  .setup-armies{grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);gap:5px}
  .setup-vs span{width:26px;height:26px;font-size:9px}
  .values-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.troop-count{width:max-content;border-radius:6px;padding:0 6px;background:rgba(7,9,17,.7)}
.troops li.dead b{background:rgba(7,9,17,.6)}
.troops li b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.15;text-align:center;font-size:9px;padding:1px 3px;max-width:100%}
.troop-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:-2px 0 5px}
.troop-row .troop-count{margin:0}
.troop-row .roster-edit{width:26px;height:24px;margin:0;font-size:12px}
.army-id b.long{font-size:10.5px}
.troops li b.long{font-size:7.6px;padding:1px 2px}

/* ---------- الثيمات (دائرة جنب الزوم) ---------- */
.theme-btn{padding:0}
.theme-dot{display:block;width:20px;height:20px;border-radius:50%;background:conic-gradient(#e3b75a 0 25%,#0a0c16 0 50%,#e3b75a 0 75%,#0a0c16 0);box-shadow:0 0 0 2px rgba(255,255,255,.25),0 0 10px var(--gold);transition:transform .35s}
.theme-btn:active .theme-dot{transform:rotate(180deg) scale(.85)}
body[data-theme="night"]{--gold:#c9a3ff;--accent:#c9a3ff;background:radial-gradient(circle at 100% 0,rgba(150,90,255,.24),transparent 36%),radial-gradient(circle at 0 0,rgba(255,80,180,.17),transparent 36%),radial-gradient(circle at 50% 110%,rgba(201,163,255,.12),transparent 42%),#0b0716}
body[data-theme="night"] .nobles-page .game-header{background:linear-gradient(180deg,rgba(11,7,22,.96),rgba(11,7,22,.82))}
body[data-theme="night"] .board{border-color:rgba(201,163,255,.25);background:radial-gradient(circle at 50% 50%,rgba(201,163,255,.09),transparent 60%),#0d0919}
body[data-theme="night"] .card-back{border-color:rgba(201,163,255,.4);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.09),transparent 65%),linear-gradient(150deg,#2d2150,#160f2a)}
body[data-theme="night"] .numbered .card-back{background:repeating-linear-gradient(45deg,rgba(201,163,255,.08) 0 3px,transparent 3px 8px),radial-gradient(circle at 50% 40%,#3a1f4a,#140b1f 75%)}
body[data-theme="night"] .card-number{background:linear-gradient(180deg,#f1e6ff,#c9a3ff 55%,#7d4fd1);-webkit-background-clip:text;background-clip:text}
body[data-theme="night"] .modal-card{background:linear-gradient(180deg,#221637,#140d24)}
body[data-theme="night"] .result-square{border-color:rgba(201,163,255,.35);background:radial-gradient(circle at 50% 35%,rgba(201,163,255,.16),transparent 70%),#120b22}
body[data-theme="night"] .settings{background:rgba(22,14,38,.85)}
body[data-theme="night"] .theme-dot{background:conic-gradient(#c9a3ff 0 25%,#0d0919 0 50%,#c9a3ff 0 75%,#0d0919 0)}
body[data-theme="desert"]{--gold:#f0b860;--accent:#f0b860;background:radial-gradient(circle at 100% 0,rgba(255,160,60,.2),transparent 36%),radial-gradient(circle at 0 0,rgba(200,90,40,.17),transparent 36%),radial-gradient(circle at 50% 110%,rgba(240,184,96,.12),transparent 42%),#120c06}
body[data-theme="desert"] .nobles-page .game-header{background:linear-gradient(180deg,rgba(18,12,6,.96),rgba(18,12,6,.82))}
body[data-theme="desert"] .board{border-color:rgba(240,184,96,.25);background:radial-gradient(circle at 50% 50%,rgba(240,184,96,.09),transparent 60%),#150e07}
body[data-theme="desert"] .card-back{border-color:rgba(240,184,96,.4);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.09),transparent 65%),linear-gradient(150deg,#4a3420,#21160c)}
body[data-theme="desert"] .numbered .card-back{background:repeating-linear-gradient(45deg,rgba(240,184,96,.08) 0 3px,transparent 3px 8px),radial-gradient(circle at 50% 40%,#4d3214,#1a1108 75%)}
body[data-theme="desert"] .card-number{background:linear-gradient(180deg,#fff0d0,#f0b860 55%,#9a6420);-webkit-background-clip:text;background-clip:text}
body[data-theme="desert"] .modal-card{background:linear-gradient(180deg,#2a1d10,#1a1209)}
body[data-theme="desert"] .result-square{border-color:rgba(240,184,96,.35);background:radial-gradient(circle at 50% 35%,rgba(240,184,96,.16),transparent 70%),#170f08}
body[data-theme="desert"] .settings{background:rgba(32,22,12,.85)}
body[data-theme="desert"] .theme-dot{background:conic-gradient(#f0b860 0 25%,#150e07 0 50%,#f0b860 0 75%,#150e07 0)}
body[data-theme="emerald"]{--gold:#5fe0a8;--accent:#5fe0a8;background:radial-gradient(circle at 100% 0,rgba(40,200,140,.2),transparent 36%),radial-gradient(circle at 0 0,rgba(20,140,120,.17),transparent 36%),radial-gradient(circle at 50% 110%,rgba(95,224,168,.12),transparent 42%),#04100c}
body[data-theme="emerald"] .nobles-page .game-header{background:linear-gradient(180deg,rgba(4,16,12,.96),rgba(4,16,12,.82))}
body[data-theme="emerald"] .board{border-color:rgba(95,224,168,.25);background:radial-gradient(circle at 50% 50%,rgba(95,224,168,.09),transparent 60%),#061410}
body[data-theme="emerald"] .card-back{border-color:rgba(95,224,168,.4);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.09),transparent 65%),linear-gradient(150deg,#164233,#0a1d17)}
body[data-theme="emerald"] .numbered .card-back{background:repeating-linear-gradient(45deg,rgba(95,224,168,.08) 0 3px,transparent 3px 8px),radial-gradient(circle at 50% 40%,#1d3d23,#08160f 75%)}
body[data-theme="emerald"] .card-number{background:linear-gradient(180deg,#dcffef,#5fe0a8 55%,#1f8a5c);-webkit-background-clip:text;background-clip:text}
body[data-theme="emerald"] .modal-card{background:linear-gradient(180deg,#0f2a22,#081a15)}
body[data-theme="emerald"] .result-square{border-color:rgba(95,224,168,.35);background:radial-gradient(circle at 50% 35%,rgba(95,224,168,.16),transparent 70%),#07170f}
body[data-theme="emerald"] .settings{background:rgba(10,28,22,.85)}
body[data-theme="emerald"] .theme-dot{background:conic-gradient(#5fe0a8 0 25%,#061410 0 50%,#5fe0a8 0 75%,#061410 0)}
body[data-theme="silver"]{--gold:#d9dee8;--accent:#d9dee8;background:radial-gradient(circle at 100% 0,rgba(200,210,230,.13),transparent 36%),radial-gradient(circle at 0 0,rgba(150,160,180,.11),transparent 36%),radial-gradient(circle at 50% 110%,rgba(217,222,232,.12),transparent 42%),#0a0a0b}
body[data-theme="silver"] .nobles-page .game-header{background:linear-gradient(180deg,rgba(10,10,11,.96),rgba(10,10,11,.82))}
body[data-theme="silver"] .board{border-color:rgba(217,222,232,.25);background:radial-gradient(circle at 50% 50%,rgba(217,222,232,.09),transparent 60%),#0e0e10}
body[data-theme="silver"] .card-back{border-color:rgba(217,222,232,.4);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.09),transparent 65%),linear-gradient(150deg,#34363d,#16171a)}
body[data-theme="silver"] .numbered .card-back{background:repeating-linear-gradient(45deg,rgba(217,222,232,.08) 0 3px,transparent 3px 8px),radial-gradient(circle at 50% 40%,#2e2f33,#111113 75%)}
body[data-theme="silver"] .card-number{background:linear-gradient(180deg,#ffffff,#d9dee8 55%,#8a919e);-webkit-background-clip:text;background-clip:text}
body[data-theme="silver"] .modal-card{background:linear-gradient(180deg,#1d1e22,#121215)}
body[data-theme="silver"] .result-square{border-color:rgba(217,222,232,.35);background:radial-gradient(circle at 50% 35%,rgba(217,222,232,.16),transparent 70%),#111114}
body[data-theme="silver"] .settings{background:rgba(22,22,26,.85)}
body[data-theme="silver"] .theme-dot{background:conic-gradient(#d9dee8 0 25%,#0e0e10 0 50%,#d9dee8 0 75%,#0e0e10 0)}
.header-tools .theme-btn{width:32px;height:32px;border-radius:50%;align-self:center}

/* ---------- ثيمات إضافية: جليد، جحيم، فضاء، نهار ---------- */
body[data-theme="ice"]{--gold:#9be7ff;--accent:#9be7ff;background:radial-gradient(circle at 100% 0,rgba(120,220,255,.26),transparent 36%),radial-gradient(circle at 0 0,rgba(200,240,255,.14),transparent 36%),radial-gradient(circle at 50% 110%,rgba(155,231,255,.12),transparent 42%),#05101a}
body[data-theme="ice"] .nobles-page .game-header{background:linear-gradient(180deg,rgba(5,16,26,.96),rgba(5,16,26,.82))}
body[data-theme="ice"] .board{border-color:rgba(155,231,255,.3);background:radial-gradient(circle at 50% 50%,rgba(155,231,255,.1),transparent 60%),#0a1b28}
body[data-theme="ice"] .card-back{border-color:rgba(155,231,255,.45);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.12),transparent 65%),linear-gradient(150deg,#4f7ea3,#17324a)}
body[data-theme="ice"] .numbered .card-back{background:repeating-linear-gradient(45deg,rgba(155,231,255,.1) 0 3px,transparent 3px 8px),radial-gradient(circle at 50% 40%,#2b5878,#0e2233 75%)}
body[data-theme="ice"] .card-number{background:linear-gradient(180deg,#ffffff,#9be7ff 55%,#3d8fb8);-webkit-background-clip:text;background-clip:text}
body[data-theme="ice"] .modal-card{background:linear-gradient(180deg,#12324a,#0b1f30)}
body[data-theme="ice"] .result-square{border-color:rgba(155,231,255,.4);background:radial-gradient(circle at 50% 35%,rgba(155,231,255,.18),transparent 70%),#0b1e2e}
body[data-theme="ice"] .settings{background:rgba(12,32,48,.85)}
body[data-theme="ice"] .theme-dot{background:conic-gradient(#9be7ff 0 25%,#0a1b28 0 50%,#9be7ff 0 75%,#0a1b28 0)}
body[data-theme="hell"]{--gold:#ff7a2e;--accent:#ff7a2e;background:radial-gradient(circle at 100% 0,rgba(255,70,20,.3),transparent 36%),radial-gradient(circle at 0 0,rgba(255,150,30,.2),transparent 36%),radial-gradient(circle at 50% 110%,rgba(255,122,46,.12),transparent 42%),#120302}
body[data-theme="hell"] .nobles-page .game-header{background:linear-gradient(180deg,rgba(18,3,2,.96),rgba(18,3,2,.82))}
body[data-theme="hell"] .board{border-color:rgba(255,122,46,.3);background:radial-gradient(circle at 50% 50%,rgba(255,122,46,.1),transparent 60%),#180504}
body[data-theme="hell"] .card-back{border-color:rgba(255,122,46,.45);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.12),transparent 65%),linear-gradient(150deg,#6a1608,#240503)}
body[data-theme="hell"] .numbered .card-back{background:repeating-linear-gradient(45deg,rgba(255,122,46,.1) 0 3px,transparent 3px 8px),radial-gradient(circle at 50% 40%,#7a2205,#200602 75%)}
body[data-theme="hell"] .card-number{background:linear-gradient(180deg,#ffe2a8,#ff7a2e 55%,#b8300c);-webkit-background-clip:text;background-clip:text}
body[data-theme="hell"] .modal-card{background:linear-gradient(180deg,#3a0b06,#210503)}
body[data-theme="hell"] .result-square{border-color:rgba(255,122,46,.4);background:radial-gradient(circle at 50% 35%,rgba(255,122,46,.18),transparent 70%),#1a0403}
body[data-theme="hell"] .settings{background:rgba(40,8,4,.85)}
body[data-theme="hell"] .theme-dot{background:conic-gradient(#ff7a2e 0 25%,#180504 0 50%,#ff7a2e 0 75%,#180504 0)}
body[data-theme="space"]{--gold:#8ab4ff;--accent:#8ab4ff;background:radial-gradient(circle at 100% 0,rgba(120,80,255,.28),transparent 36%),radial-gradient(circle at 0 0,rgba(40,160,255,.2),transparent 36%),radial-gradient(circle at 50% 110%,rgba(138,180,255,.12),transparent 42%),#03030a}
body[data-theme="space"] .nobles-page .game-header{background:linear-gradient(180deg,rgba(3,3,10,.96),rgba(3,3,10,.82))}
body[data-theme="space"] .board{border-color:rgba(138,180,255,.3);background:radial-gradient(circle at 50% 50%,rgba(138,180,255,.1),transparent 60%),#070718}
body[data-theme="space"] .card-back{border-color:rgba(138,180,255,.45);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.12),transparent 65%),linear-gradient(150deg,#262b66,#0a0b22)}
body[data-theme="space"] .numbered .card-back{background:repeating-linear-gradient(45deg,rgba(138,180,255,.1) 0 3px,transparent 3px 8px),radial-gradient(circle at 50% 40%,#2f1d5c,#0b0820 75%)}
body[data-theme="space"] .card-number{background:linear-gradient(180deg,#ffffff,#8ab4ff 55%,#5b4bd6);-webkit-background-clip:text;background-clip:text}
body[data-theme="space"] .modal-card{background:linear-gradient(180deg,#15183a,#0a0c22)}
body[data-theme="space"] .result-square{border-color:rgba(138,180,255,.4);background:radial-gradient(circle at 50% 35%,rgba(138,180,255,.18),transparent 70%),#08081c}
body[data-theme="space"] .settings{background:rgba(12,12,34,.85)}
body[data-theme="space"] .theme-dot{background:conic-gradient(#8ab4ff 0 25%,#070718 0 50%,#8ab4ff 0 75%,#070718 0)}
body[data-theme="sunny"]{--gold:#ffd23f;--accent:#ffd23f;background:radial-gradient(circle at 100% 0,rgba(255,236,140,.95),transparent 36%),radial-gradient(circle at 0 0,rgba(255,255,255,.55),transparent 36%),radial-gradient(circle at 50% 110%,rgba(255,190,40,.12),transparent 42%),#8fd3ff}
body[data-theme="sunny"] .nobles-page .game-header{background:linear-gradient(180deg,rgba(62,150,220,.96),rgba(62,150,220,.82))}
body[data-theme="sunny"] .board{border-color:rgba(255,190,40,.3);background:radial-gradient(circle at 50% 50%,rgba(255,190,40,.1),transparent 60%),#f2cf7c}
body[data-theme="sunny"] .card-back{border-color:rgba(255,190,40,.45);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.12),transparent 65%),linear-gradient(150deg,#4fb3ff,#1f6fd1)}
body[data-theme="sunny"] .numbered .card-back{background:repeating-linear-gradient(45deg,rgba(255,190,40,.1) 0 3px,transparent 3px 8px),radial-gradient(circle at 50% 40%,#ffb43b,#e0761a 75%)}
body[data-theme="sunny"] .card-number{background:linear-gradient(180deg,#ffffff,#ffd23f 55%,#c77a00);-webkit-background-clip:text;background-clip:text}
body[data-theme="sunny"] .modal-card{background:linear-gradient(180deg,#6a3d12,#3f240a)}
body[data-theme="sunny"] .result-square{border-color:rgba(255,190,40,.4);background:radial-gradient(circle at 50% 35%,rgba(255,190,40,.18),transparent 70%),#3a8de0}
body[data-theme="sunny"] .settings{background:rgba(70,40,12,.88)}
body[data-theme="sunny"] .theme-dot{background:conic-gradient(#ffd23f 0 25%,#f2cf7c 0 50%,#ffd23f 0 75%,#f2cf7c 0)}
/* جليد: شقوق صقيع على اللوحة */
body[data-theme="ice"] .board{background:repeating-linear-gradient(60deg,rgba(200,240,255,.05) 0 1px,transparent 1px 18px),repeating-linear-gradient(-60deg,rgba(200,240,255,.05) 0 1px,transparent 1px 18px),radial-gradient(circle at 50% 50%,rgba(155,231,255,.12),transparent 60%),#0a1b28;box-shadow:inset 0 0 30px rgba(170,230,255,.18),0 18px 50px rgba(0,0,0,.35)}
/* جحيم: اللوحة تتوهج مثل الحمم */
body[data-theme="hell"] .board{animation:hellPulse 2.8s ease-in-out infinite}
@keyframes hellPulse{0%,100%{box-shadow:inset 0 0 40px rgba(255,60,10,.25),0 0 18px rgba(255,70,20,.25)}50%{box-shadow:inset 0 0 60px rgba(255,90,20,.45),0 0 34px rgba(255,90,20,.45)}}
/* فضاء: نجوم تلمع */
body[data-theme="space"]:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(1.2px 1.2px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 90px 120px,#cfe0ff,transparent),radial-gradient(1.5px 1.5px at 160px 60px,#fff,transparent),radial-gradient(1px 1px at 230px 170px,#e8d8ff,transparent),radial-gradient(1.3px 1.3px at 60px 200px,#fff,transparent),radial-gradient(1px 1px at 200px 240px,#bfe2ff,transparent);background-size:260px 260px;animation:stars 4s ease-in-out infinite alternate}
body[data-theme="space"] .board{background:radial-gradient(1px 1px at 30px 40px,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 120px 90px,rgba(255,255,255,.5),transparent),radial-gradient(60% 50% at 30% 30%,rgba(120,80,255,.16),transparent),radial-gradient(60% 50% at 75% 70%,rgba(40,160,255,.14),transparent),#070718;background-size:170px 170px,210px 210px,auto,auto,auto}
@keyframes stars{from{opacity:.55}to{opacity:1}}
/* نهار: سماء وشمس، والنصوص اللي على الخلفية تصير غامقة */
body[data-theme="sunny"]{background:radial-gradient(circle at 92% 4%,#fff7c2 0 34px,rgba(255,226,110,.75) 35px,rgba(255,214,90,.25) 90px,transparent 170px),linear-gradient(180deg,#6cc4ff 0%,#a9dcff 45%,#ffe9b0 100%)}
body[data-theme="sunny"] .game-title p,body[data-theme="sunny"] .setup-hint,body[data-theme="sunny"] .nobles-footer,body[data-theme="sunny"] .nobles-footer span{color:#3b2a10}
body[data-theme="sunny"] .board{box-shadow:inset 0 0 30px rgba(255,255,255,.35),0 18px 40px rgba(120,70,0,.25)}
body[data-theme="sunny"] .result-turn small,body[data-theme="sunny"] #turnLabel{color:#5a3a08!important}
body[data-theme="sunny"] .result-info p{color:#3b2a10}
body[data-theme="sunny"] .battle-log li{background:rgba(255,255,255,.55);color:#3b2a10}
body[data-theme="sunny"] .battle-log li:first-child{background:rgba(255,255,255,.8);color:#1d1406}
body[data-theme="sunny"] .war-card .card-back i{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
body[data-theme="sunny"] .theme-dot{background:radial-gradient(circle,#fff6b0 0 35%,#ffcc33 36% 60%,#6cc4ff 61%)}
body[data-theme="sunny"] .card-number{background:none;color:#fff;-webkit-text-fill-color:#fff;text-shadow:0 2px 3px rgba(150,70,0,.75)}

/* ---------- ثيمات: صيفي، فسفوري، وردي بناتي ---------- */
body[data-theme="summer"]{--gold:#ffe066;--accent:#ffe066;background:radial-gradient(circle at 100% 0,rgba(255,200,90,.9),transparent 36%),radial-gradient(circle at 0 0,rgba(255,255,255,.5),transparent 36%),radial-gradient(circle at 50% 110%,rgba(255,170,60,.14),transparent 42%),#3fd0d4}
body[data-theme="summer"] .nobles-page .game-header{background:linear-gradient(180deg,rgba(0,150,170,.96),rgba(0,150,170,.84))}
body[data-theme="summer"] .board{border-color:rgba(255,170,60,.4);background:radial-gradient(circle at 50% 50%,rgba(255,170,60,.12),transparent 60%),#ffd7a1}
body[data-theme="summer"] .card-back{border-color:rgba(255,170,60,.5);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.16),transparent 65%),linear-gradient(150deg,#ff7a59,#e8364f)}
body[data-theme="summer"] .numbered .card-back{background:repeating-linear-gradient(45deg,rgba(255,255,255,.1) 0 3px,transparent 3px 8px),radial-gradient(circle at 50% 40%,#16c7c1,#0a8f9e 75%)}
body[data-theme="summer"] .card-number{background:linear-gradient(180deg,#ffffff,#ffe066 55%,#e07b00);-webkit-background-clip:text;background-clip:text}
body[data-theme="summer"] .modal-card{background:linear-gradient(180deg,#0b6f7c,#064a54)}
body[data-theme="summer"] .result-square{border-color:rgba(255,170,60,.45);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.18),transparent 70%),#11a9b8}
body[data-theme="summer"] .settings{background:rgba(6,74,84,.88)}
body[data-theme="summer"] .theme-dot{background:conic-gradient(#ffe066 0 25%,#ffd7a1 0 50%,#ffe066 0 75%,#ffd7a1 0)}
body[data-theme="neon"]{--gold:#39ff14;--accent:#39ff14;background:radial-gradient(circle at 100% 0,rgba(57,255,20,.22),transparent 36%),radial-gradient(circle at 0 0,rgba(230,255,0,.16),transparent 36%),radial-gradient(circle at 50% 110%,rgba(57,255,20,.14),transparent 42%),#020403}
body[data-theme="neon"] .nobles-page .game-header{background:linear-gradient(180deg,rgba(2,4,3,.96),rgba(2,4,3,.84))}
body[data-theme="neon"] .board{border-color:rgba(57,255,20,.4);background:radial-gradient(circle at 50% 50%,rgba(57,255,20,.12),transparent 60%),#050a06}
body[data-theme="neon"] .card-back{border-color:rgba(57,255,20,.5);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.16),transparent 65%),linear-gradient(150deg,#0f2a12,#030805)}
body[data-theme="neon"] .numbered .card-back{background:repeating-linear-gradient(45deg,rgba(255,255,255,.1) 0 3px,transparent 3px 8px),radial-gradient(circle at 50% 40%,#1a3300,#050a02 75%)}
body[data-theme="neon"] .card-number{background:linear-gradient(180deg,#f4ffb0,#39ff14 55%,#1fae0a);-webkit-background-clip:text;background-clip:text}
body[data-theme="neon"] .modal-card{background:linear-gradient(180deg,#0b1a0d,#040805)}
body[data-theme="neon"] .result-square{border-color:rgba(57,255,20,.45);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.18),transparent 70%),#030805}
body[data-theme="neon"] .settings{background:rgba(6,14,7,.88)}
body[data-theme="neon"] .theme-dot{background:conic-gradient(#39ff14 0 25%,#050a06 0 50%,#39ff14 0 75%,#050a06 0)}
body[data-theme="pink"]{--gold:#ff4fa3;--accent:#ff4fa3;background:radial-gradient(circle at 100% 0,rgba(255,255,255,.75),transparent 36%),radial-gradient(circle at 0 0,rgba(255,150,200,.55),transparent 36%),radial-gradient(circle at 50% 110%,rgba(255,79,163,.14),transparent 42%),#ffd6e8}
body[data-theme="pink"] .nobles-page .game-header{background:linear-gradient(180deg,rgba(236,96,160,.96),rgba(236,96,160,.84))}
body[data-theme="pink"] .board{border-color:rgba(255,79,163,.4);background:radial-gradient(circle at 50% 50%,rgba(255,79,163,.12),transparent 60%),#ffe6f1}
body[data-theme="pink"] .card-back{border-color:rgba(255,79,163,.5);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.16),transparent 65%),linear-gradient(150deg,#ff8fc7,#e0458f)}
body[data-theme="pink"] .numbered .card-back{background:repeating-linear-gradient(45deg,rgba(255,255,255,.1) 0 3px,transparent 3px 8px),radial-gradient(circle at 50% 40%,#ffb3d9,#f06aa8 75%)}
body[data-theme="pink"] .card-number{background:linear-gradient(180deg,#ffffff,#ff4fa3 55%,#c2185b);-webkit-background-clip:text;background-clip:text}
body[data-theme="pink"] .modal-card{background:linear-gradient(180deg,#a23a72,#6e1f4c)}
body[data-theme="pink"] .result-square{border-color:rgba(255,79,163,.45);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.18),transparent 70%),#f28fc0}
body[data-theme="pink"] .settings{background:rgba(110,31,76,.88)}
body[data-theme="pink"] .theme-dot{background:conic-gradient(#ff4fa3 0 25%,#ffe6f1 0 50%,#ff4fa3 0 75%,#ffe6f1 0)}
/* صيفي ووردي: خلفية فاتحة، فالنصوص اللي عليها غامقة */
body[data-theme="summer"]{background:radial-gradient(circle at 90% 5%,#fff4b8 0 30px,rgba(255,210,90,.8) 31px,rgba(255,190,80,.25) 85px,transparent 160px),linear-gradient(180deg,#5fe1e6 0%,#a6f0ee 50%,#ffe3b3 100%)}
body[data-theme="pink"]{background:radial-gradient(circle at 85% 8%,rgba(255,255,255,.9),transparent 30%),radial-gradient(circle at 10% 90%,rgba(255,170,215,.8),transparent 40%),linear-gradient(180deg,#ffc2df 0%,#ffe0ee 55%,#ffd1e6 100%)}
body[data-theme="summer"] .game-title p,body[data-theme="pink"] .game-title p,body[data-theme="summer"] .setup-hint,body[data-theme="pink"] .setup-hint,body[data-theme="summer"] .nobles-footer,body[data-theme="pink"] .nobles-footer,body[data-theme="summer"] .nobles-footer span,body[data-theme="pink"] .nobles-footer span{color:#4a1d33}
body[data-theme="summer"] .game-title p,body[data-theme="summer"] .setup-hint,body[data-theme="summer"] .nobles-footer,body[data-theme="summer"] .nobles-footer span{color:#0d3b40}
body[data-theme="summer"] .result-turn small,body[data-theme="pink"] .result-turn small,body[data-theme="summer"] #turnLabel,body[data-theme="pink"] #turnLabel{color:#5a2440!important}
body[data-theme="summer"] .result-turn small,body[data-theme="summer"] #turnLabel{color:#7a3a00!important}
body[data-theme="summer"] .result-info p,body[data-theme="pink"] .result-info p{color:#3a1428}
body[data-theme="summer"] .battle-log li,body[data-theme="pink"] .battle-log li{background:rgba(255,255,255,.6);color:#3a1428}
body[data-theme="summer"] .battle-log li:first-child,body[data-theme="pink"] .battle-log li:first-child{background:rgba(255,255,255,.85);color:#1d0a14}
body[data-theme="summer"] .card-number,body[data-theme="pink"] .card-number{background:none;color:#fff;-webkit-text-fill-color:#fff;text-shadow:0 2px 3px rgba(0,0,0,.45)}
body[data-theme="summer"] .board{box-shadow:inset 0 0 30px rgba(255,255,255,.4),0 18px 40px rgba(0,90,100,.25)}
body[data-theme="pink"] .board{box-shadow:inset 0 0 30px rgba(255,255,255,.5),0 18px 40px rgba(200,40,110,.22)}
body[data-theme="pink"] .game-title h1:not(.alt-name):not(.contact-name){background:linear-gradient(90deg,#fff,#ffe1f0,#fff);-webkit-background-clip:text;background-clip:text}
body[data-theme="summer"] .theme-dot{background:radial-gradient(circle,#ffe066 0 30%,#ff7a59 31% 55%,#16c7c1 56%)}
body[data-theme="pink"] .theme-dot{background:radial-gradient(circle,#fff 0 28%,#ff8fc7 29% 58%,#e0458f 59%)}
/* فسفوري: كل شي يشع */
body[data-theme="neon"] .card-back{box-shadow:0 0 8px rgba(57,255,20,.35),inset 0 0 6px rgba(57,255,20,.2)}
body[data-theme="neon"] .board{box-shadow:0 0 22px rgba(57,255,20,.35),inset 0 0 30px rgba(57,255,20,.12)}
body[data-theme="neon"] .card-number{filter:drop-shadow(0 0 4px rgba(120,255,60,.9))}
body[data-theme="neon"] .game-title h1:not(.alt-name):not(.contact-name){background:linear-gradient(90deg,#eaff6b,#39ff14,#eaff6b);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 6px rgba(57,255,20,.8))}
body[data-theme="neon"] .result-square{box-shadow:0 0 18px rgba(57,255,20,.4)}
body[data-theme="neon"] .theme-dot{background:radial-gradient(circle,#eaff6b 0 35%,#39ff14 36%);box-shadow:0 0 12px #39ff14}

/* 2026-10-28 owner «اصواتها واشكال جيشها والملوك»: drawn ice / fire soldiers and kings */
[data-army="R"],.soldier-list[data-list="R"],.team-R,[data-t="R"]{--sol:url(/assets/nobles/sol_R.webp?v=1)}
[data-army="L"],.soldier-list[data-list="L"],.team-L,[data-t="L"]{--sol:url(/assets/nobles/sol_L.webp?v=1)}
.sol-art{display:block;width:100%;height:100%;background:var(--sol) 50% 100%/contain no-repeat;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.soldier-list li .mini-soldier{width:24px;height:32px}
.troops .figure{width:34px;height:46px}
.troops li .figure .sol-art{animation:solIdle 2.8s ease-in-out infinite;transform-origin:50% 100%}
.troops li:nth-child(2n) .figure .sol-art{animation-delay:-1.1s}.troops li:nth-child(3n) .figure .sol-art{animation-delay:-2s}
@keyframes solIdle{50%{transform:translateY(-1.5px) scaleY(1.02)}}
.army.active .troops li:not(.dead) .figure .sol-art{filter:drop-shadow(0 0 5px var(--team)) drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.troops li.dead .figure .sol-art{animation:none;filter:grayscale(1) brightness(.45);transform:rotate(-78deg) translate(-8px,6px) scale(.86);transition:transform .5s}
.pick-option .figure .sol-art{filter:grayscale(1) brightness(.6);transition:filter .3s}
.pick-option:hover .figure .sol-art,.pick-option:focus-visible .figure .sol-art{filter:none}
.kill-mode .pick-option .figure .sol-art{filter:none}
.kill-mode .pick-option:hover .figure .sol-art,.kill-mode .pick-option:focus-visible .figure .sol-art{filter:grayscale(1) brightness(.5)}
#rosterList .mini-soldier{display:inline-block;width:24px;height:32px;vertical-align:middle}
#rosterList li.dead .sol-art{filter:grayscale(1) brightness(.5)}
/* the kings */
.king{width:50px;height:64px;margin:-12px -2px -8px}
.king-art{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;transform-origin:50% 100%;filter:drop-shadow(0 3px 4px rgba(0,0,0,.55));animation:kingIdle 3s ease-in-out infinite;-webkit-user-drag:none}
.army.active .king-art{animation:kingHop .9s ease-in-out infinite;filter:drop-shadow(0 0 9px var(--team)) drop-shadow(0 3px 4px rgba(0,0,0,.5))}

/* 2026-10-28 owner: each army picks ⚔️ جنود or 😈 شياطين before the game */
.race-pick{display:flex;gap:4px;margin:2px auto 8px;padding:3px;width:max-content;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid color-mix(in srgb,var(--team) 45%,transparent);position:relative;z-index:2}
.race-pick button{border:0;border-radius:999px;padding:5px 11px;background:transparent;color:#cfd3e6;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.race-pick button[aria-pressed="true"]{background:var(--team);color:#fff;box-shadow:0 0 10px color-mix(in srgb,var(--team) 60%,transparent)}
body[data-race-r="dem"] [data-army="R"],body[data-race-r="dem"] .soldier-list[data-list="R"],body[data-race-r="dem"] .team-R,body[data-race-r="dem"] [data-t="R"]{--sol:url(/assets/nobles/dsol_R.webp?v=1)}
body[data-race-l="dem"] [data-army="L"],body[data-race-l="dem"] .soldier-list[data-list="L"],body[data-race-l="dem"] .team-L,body[data-race-l="dem"] [data-t="L"]{--sol:url(/assets/nobles/dsol_L.webp?v=1)}
.race-pick{max-width:100%;gap:2px;padding:2px}
.race-pick button{padding:4px 8px;font-size:12px;white-space:nowrap}
@media (max-width:380px){.race-pick button{padding:4px 6px;font-size:11px}}