: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}
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))}
.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(255,255,255,.045);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}
.commander-badge{display:grid;place-items:center;flex:none;width:34px;height:34px;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}
.army-id b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;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}
.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(44px,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:38px;height:50px}
.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:#e6e9f2;font-size:9.5px;font-weight:800}
.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}
.army.hit:before,.army.healed:before,.army.blocked:before,.army.shielded:before{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(30,1fr);gap:5px;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.zone-top,.war-card.zone-bottom{aspect-ratio:6/5}
.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:9% 6% 6%}
.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(18px,6vw,30px);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(7px,2.1vw,11px);font-weight:900;line-height:1.3;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(11px,3.6vw,18px);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)}

/* ---------- النتيجة بالنص ---------- */
.result-surprise:not(.is-surprise){background:rgba(255,255,255,.08)!important;color:#c9cede!important;animation:none!important}
.result{grid-area:3/11/8/21;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{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}
.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:4px;padding:4px}
  .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}}