/* ممالك الأساطير — الواجهة v2 (SPEC §13): هوية «الياقوت الملكي والذهب»
   ألواح زجاجية زرقاء ليلية بإطارات ذهبية مزخرفة، نصوص عاجية، أزرار أحجار كريمة
   (ياقوت أزرق = أساسي، ذهب = ثانوي، ياقوت أحمر = خطر، جمشت = مميز)، توهج ناعم ونسيج نجوم خفيف. */
:root, .theme-sapphire {
  --night: #050816;
  --bg1: #0a1128;
  --bg2: #101a3a;
  --sap: #1a2c66;
  --sap2: #24408f;
  --sap3: #3a63c9;
  --sap-glow: #5b8cff;
  --gold: #e9c46a;
  --gold-hi: #fff0b8;
  --gold-mid: #d4a64a;
  --gold-lo: #8c6420;
  --gold-deep: #4a3410;
  --ivory: #f6eedb;
  --cream: #e8dcc0;
  --muted: #a3b0d4;
  --muted2: #7482ab;
  --ruby: #e0405a;
  --ruby-lo: #7a1028;
  --emerald: #3fd39a;
  --emerald-lo: #0d6a4a;
  --amethyst: #a46cf5;
  --amethyst-lo: #4a1f8a;
  --aqua: #7fe3ff;
  --ok: #6fe3a8;
  --bad: #ff7a8a;
  --line: rgba(233, 196, 106, 0.42);
  --line-soft: rgba(var(--rgb-hair), 0.16);
  --glass: linear-gradient(180deg, rgba(26, 40, 90, 0.9), rgba(10, 16, 42, 0.93));
  --glass-2: linear-gradient(180deg, rgba(34, 52, 112, 0.55), rgba(14, 22, 54, 0.6));
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  --r: 14px;
  /* v4 §11 — theme tokens (this block = «الياقوت الملكي»; html.theme-wood redefines them, section «v4 theme» at the end).
     Every sapphire colour of the rules below is one of these tokens: rgba(var(--rgb-*), a) for the translucent families and
     var(--*) for the solid stops. New CSS must use them (tests/test_v4_ui.php checks that no sapphire literal is left). */
  --rgb-well: 3, 7, 22;        /* wells: inputs, chips, list rows */
  --rgb-deep: 10, 16, 42;      /* dark rings, gradient ends */
  --rgb-navy-lo: 16, 28, 70;
  --rgb-navy: 26, 40, 90;      /* panels, bubbles */
  --rgb-sap: 36, 64, 143;      /* headers, table heads, hero cards */
  --rgb-sap-hi: 60, 102, 208;  /* active selection */
  --rgb-glow: 91, 140, 255;    /* glow, hover */
  --rgb-hair: 160, 182, 255;   /* hairlines, soft borders */
  --gem-hi: #2f4fa8; --gem-lo: #0e1a46; --gem-hi2: #3a63c9; --gem-lo2: #0c1640; --gem-mid: #13235a;   /* icon wells / medals */
  --orb-1: #3558b8; --orb-2: #142663; --orb-3: #0a1438;   /* round HUD buttons, pedestal, hero medal */
  --tab-1: #3c66d0; --tab-2: #1d3a8f;                      /* active tab / switch */
  --modal-1: #13204b; --modal-2: #0b1330; --modal-3: #080e26;
  --login-1: #0b1534; --login-2: #070c22;
  --opt-bg: #0e1736; --mini-bg: #0a1430;
  --btn-1: #6f9bff; --btn-2: #2f5fd6; --btn-3: #183a97; --btn-b: #0b1a4d;   /* the primary gem button */
  /* a disabled button (.btn:disabled): its dim, opacity, ring and gloss — UI5-07: onyx dims harder and drops the ring / gloss */
  --btn-off-filter: grayscale(0.85) brightness(0.72); --btn-off-op: 0.75; --btn-off-ring: rgba(233, 196, 106, 0.25); --btn-off-gloss: 1;
  --tint: #cfe0ff; --tint2: #b8ccff; --tint3: #8fb4ff;   /* light text tints */
  --bar-1: #4f7fff; --bar-2: #9fd0ff;
  --bub-1: #4a74dc; --bub-2: #24479f;
  --knob-1: #cfd8f0; --knob-2: #8a96b8; --off: #5a6488;
  --main-1: #9a6cf5; --main-2: #4a1f8a; --main-3: #220c48;   /* the main dock button (map) */
  --ridge-1: #1c2f6e; --ridge-2: #0a1230; --ridge-3: #101c4a; --ridge-4: #050816; --ridge-5: #0d1840;   /* login mountains */
  --tex-panel: none;   /* surface texture under the panels (wood: grain) */
  --prot-bg: rgba(20, 60, 110, 0.5); --prot-line: rgba(127, 227, 255, 0.55); --prot-fg: #c9f1ff;   /* beginner-protection chip (VIS4-02) */
  --tex-sky: var(--tex-stars);   /* dialog / login texture */
  --tex-sky-size: 240px 240px;
  /* v5 §8: the navy chrome drawn by the canvas / SVG code (map.js, village.js, buildings.js read them once per theme, ui-building.js /
     ui-hero.js ring tracks use them live): rgb triplets + two solid stops. Sapphire and wood keep the v4 navy, «العقيق الأسود» black */
  --cv-ink: 8, 14, 40;      /* army marker ring, army timer pill, village name pill (foot) */
  --cv-label: 8, 12, 30;    /* map name labels, landmark labels, own village names at ×2 */
  --cv-group: 26, 44, 102;  /* kingdom group label, village name pill (top) */
  --cv-edge: 6, 9, 22;      /* dark outline of village tokens / army dots / minimap marks */
  --cv-well: 3, 7, 22;      /* truce timer track under a map label */
  --cv-bar: 6, 10, 30;      /* village build progress bar */
  --cv-tick: 12, 22, 64;    /* village label tick */
  --cv-ring: 8, 13, 36;     /* SVG level / hero ring track */
  --cv-badge: #0c1640;      /* level badge ring, army count digits, signpost disc (foot) */
  --cv-sign: #3a63c9;       /* signpost disc (top) */
  --font: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --title: 'Reem Kufi', 'Cairo', serif;
  --acc: #e9c46a;
  --orn-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg %3E%3Cg fill='none' stroke='%23f0cf7a' stroke-linecap='round'%3E%3Cpath d='M2 32V11Q2 2 11 2h21' stroke-width='1.6'/%3E%3Cpath d='M7 32V14q0-7 7-7h18' stroke-width='.9' stroke-opacity='.55'/%3E%3Cpath d='M2 11q7 0 9 5t-2 6' stroke-width='1.2'/%3E%3Cpath d='M11 2q0 7 5 9t6-2' stroke-width='1.2'/%3E%3C/g%3E%3Cpath d='M11 11l3.2-3.2 3.2 3.2-3.2 3.2z' fill='%23f0cf7a'/%3E%3Ccircle cx='2.2' cy='2.2' r='1.7' fill='%23f0cf7a'/%3E%3C/g%3E%3C/svg%3E");
  --orn-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg transform='translate(34 0) scale(-1 1)'%3E%3Cg fill='none' stroke='%23f0cf7a' stroke-linecap='round'%3E%3Cpath d='M2 32V11Q2 2 11 2h21' stroke-width='1.6'/%3E%3Cpath d='M7 32V14q0-7 7-7h18' stroke-width='.9' stroke-opacity='.55'/%3E%3Cpath d='M2 11q7 0 9 5t-2 6' stroke-width='1.2'/%3E%3Cpath d='M11 2q0 7 5 9t6-2' stroke-width='1.2'/%3E%3C/g%3E%3Cpath d='M11 11l3.2-3.2 3.2 3.2-3.2 3.2z' fill='%23f0cf7a'/%3E%3Ccircle cx='2.2' cy='2.2' r='1.7' fill='%23f0cf7a'/%3E%3C/g%3E%3C/svg%3E");
  --orn-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg transform='translate(0 34) scale(1 -1)'%3E%3Cg fill='none' stroke='%23f0cf7a' stroke-linecap='round'%3E%3Cpath d='M2 32V11Q2 2 11 2h21' stroke-width='1.6'/%3E%3Cpath d='M7 32V14q0-7 7-7h18' stroke-width='.9' stroke-opacity='.55'/%3E%3Cpath d='M2 11q7 0 9 5t-2 6' stroke-width='1.2'/%3E%3Cpath d='M11 2q0 7 5 9t6-2' stroke-width='1.2'/%3E%3C/g%3E%3Cpath d='M11 11l3.2-3.2 3.2 3.2-3.2 3.2z' fill='%23f0cf7a'/%3E%3Ccircle cx='2.2' cy='2.2' r='1.7' fill='%23f0cf7a'/%3E%3C/g%3E%3C/svg%3E");
  --orn-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg transform='translate(34 34) scale(-1 -1)'%3E%3Cg fill='none' stroke='%23f0cf7a' stroke-linecap='round'%3E%3Cpath d='M2 32V11Q2 2 11 2h21' stroke-width='1.6'/%3E%3Cpath d='M7 32V14q0-7 7-7h18' stroke-width='.9' stroke-opacity='.55'/%3E%3Cpath d='M2 11q7 0 9 5t-2 6' stroke-width='1.2'/%3E%3Cpath d='M11 2q0 7 5 9t6-2' stroke-width='1.2'/%3E%3C/g%3E%3Cpath d='M11 11l3.2-3.2 3.2 3.2-3.2 3.2z' fill='%23f0cf7a'/%3E%3Ccircle cx='2.2' cy='2.2' r='1.7' fill='%23f0cf7a'/%3E%3C/g%3E%3C/svg%3E");
  --orn-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='14' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23f0cf7a' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23f0cf7a'/%3E%3Cstop offset='1' stop-color='%23f0cf7a' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect y='6.4' width='240' height='1.2' fill='url(%23g)'/%3E%3C/svg%3E");
  --orn-dia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='14' viewBox='0 0 30 14'%3E%3Cpath d='M15 1l6 6-6 6-6-6z' fill='%23f0cf7a'/%3E%3Cpath d='M15 4l3 3-3 3-3-3z' fill='%231a2c66'/%3E%3Ccircle cx='4' cy='7' r='1.6' fill='%23f0cf7a'/%3E%3Ccircle cx='26' cy='7' r='1.6' fill='%23f0cf7a'/%3E%3C/svg%3E");
  --tex-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Ccircle cx='77.7' cy='36.2' r='1.2' fill='%23fff' fill-opacity='0.28'/%3E%3Ccircle cx='87.8' cy='13.9' r='1.0' fill='%23fff' fill-opacity='0.38'/%3E%3Ccircle cx='104.1' cy='16.8' r='0.5' fill='%23fff' fill-opacity='0.58'/%3E%3Ccircle cx='198.4' cy='29.7' r='0.6' fill='%23fff' fill-opacity='0.63'/%3E%3Ccircle cx='138.5' cy='95.2' r='0.6' fill='%23fff' fill-opacity='0.28'/%3E%3Ccircle cx='69.5' cy='34.6' r='0.5' fill='%23fff' fill-opacity='0.59'/%3E%3Ccircle cx='24.7' cy='137.1' r='0.6' fill='%23fff' fill-opacity='0.47'/%3E%3Ccircle cx='135.4' cy='148.6' r='0.8' fill='%23ffe9b8' fill-opacity='0.66'/%3E%3Ccircle cx='186.5' cy='111.7' r='0.8' fill='%23fff' fill-opacity='0.47'/%3E%3Ccircle cx='190.7' cy='167.8' r='0.6' fill='%23dfe8ff' fill-opacity='0.30'/%3E%3Ccircle cx='126.0' cy='210.0' r='1.2' fill='%23fff' fill-opacity='0.52'/%3E%3Ccircle cx='28.3' cy='100.3' r='0.7' fill='%23ffe9b8' fill-opacity='0.34'/%3E%3Ccircle cx='101.2' cy='230.9' r='0.5' fill='%23dfe8ff' fill-opacity='0.71'/%3E%3Ccircle cx='81.6' cy='84.0' r='0.8' fill='%23ffe9b8' fill-opacity='0.60'/%3E%3Ccircle cx='16.5' cy='22.5' r='0.7' fill='%23fff' fill-opacity='0.53'/%3E%3Ccircle cx='14.6' cy='168.4' r='1.2' fill='%23ffe9b8' fill-opacity='0.60'/%3E%3Ccircle cx='68.3' cy='92.6' r='1.2' fill='%23ffe9b8' fill-opacity='0.46'/%3E%3Ccircle cx='85.3' cy='146.6' r='0.8' fill='%23dfe8ff' fill-opacity='0.29'/%3E%3Ccircle cx='31.0' cy='59.4' r='0.8' fill='%23ffe9b8' fill-opacity='0.80'/%3E%3Ccircle cx='19.3' cy='107.8' r='1.0' fill='%23fff' fill-opacity='0.42'/%3E%3Ccircle cx='196.6' cy='207.4' r='0.7' fill='%23dfe8ff' fill-opacity='0.67'/%3E%3Ccircle cx='163.9' cy='91.3' r='0.6' fill='%23fff' fill-opacity='0.34'/%3E%3Ccircle cx='36.3' cy='158.0' r='0.5' fill='%23fff' fill-opacity='0.54'/%3E%3Ccircle cx='63.1' cy='1.0' r='0.8' fill='%23dfe8ff' fill-opacity='0.57'/%3E%3Ccircle cx='228.7' cy='165.7' r='1.0' fill='%23fff' fill-opacity='0.82'/%3E%3Ccircle cx='109.6' cy='209.0' r='1.2' fill='%23ffe9b8' fill-opacity='0.73'/%3E%3Ccircle cx='95.5' cy='94.6' r='0.8' fill='%23fff' fill-opacity='0.63'/%3E%3Ccircle cx='45.7' cy='236.3' r='0.8' fill='%23dfe8ff' fill-opacity='0.35'/%3E%3Ccircle cx='144.2' cy='24.6' r='1.0' fill='%23fff' fill-opacity='0.34'/%3E%3Ccircle cx='227.7' cy='147.3' r='0.5' fill='%23ffe9b8' fill-opacity='0.77'/%3E%3Ccircle cx='35.7' cy='60.5' r='0.7' fill='%23ffe9b8' fill-opacity='0.61'/%3E%3Ccircle cx='29.5' cy='203.7' r='0.8' fill='%23dfe8ff' fill-opacity='0.54'/%3E%3Ccircle cx='20.6' cy='24.5' r='0.7' fill='%23ffe9b8' fill-opacity='0.69'/%3E%3Ccircle cx='198.9' cy='38.7' r='0.5' fill='%23dfe8ff' fill-opacity='0.37'/%3E%3Ccircle cx='35.2' cy='130.4' r='0.5' fill='%23dfe8ff' fill-opacity='0.70'/%3E%3Ccircle cx='234.8' cy='207.2' r='1.2' fill='%23dfe8ff' fill-opacity='0.76'/%3E%3Ccircle cx='218.0' cy='85.4' r='0.6' fill='%23dfe8ff' fill-opacity='0.57'/%3E%3Ccircle cx='152.7' cy='147.2' r='0.6' fill='%23ffe9b8' fill-opacity='0.73'/%3E%3Ccircle cx='177.6' cy='54.4' r='1.0' fill='%23fff' fill-opacity='0.55'/%3E%3Ccircle cx='237.5' cy='189.6' r='0.8' fill='%23dfe8ff' fill-opacity='0.41'/%3E%3Ccircle cx='107.3' cy='224.9' r='0.7' fill='%23dfe8ff' fill-opacity='0.82'/%3E%3Ccircle cx='19.3' cy='24.5' r='0.8' fill='%23fff' fill-opacity='0.37'/%3E%3Ccircle cx='115.8' cy='236.5' r='1.0' fill='%23ffe9b8' fill-opacity='0.75'/%3E%3Ccircle cx='218.2' cy='82.6' r='1.2' fill='%23fff' fill-opacity='0.30'/%3E%3Ccircle cx='218.3' cy='187.8' r='0.6' fill='%23fff' fill-opacity='0.54'/%3E%3Ccircle cx='104.1' cy='152.6' r='0.5' fill='%23ffe9b8' fill-opacity='0.73'/%3E%3C/svg%3E");
  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night); color: var(--ivory); font-family: var(--font); -webkit-tap-highlight-color: transparent; }
body { direction: rtl; user-select: none; }
/* v6 §9: صفحة الإنجليزية من اليسار إلى اليمين (dir على <html> من index.php قبل أول رسم). القواعد أدناه بالخصائص المنطقية
   (inline-start / inline-end) حيث يتبع العنصر اتجاه السطر، فتبقى العربية كما هي وتنعكس الإنجليزية؛ مواضع لوحات الواجهة على الشاشة
   (الموارد، العمود الأيمن، الأحداث، لوحة الخانة، أزرار التكبير، البطل، اللوحة الجانبية الملتصقة بجانب يختاره ui-building.js)
   تبقى في أماكنها في اللغتين. زوايا التدرّجات والإزاحات الأفقية من --ang90 / --ang270 / --fx (تنعكس في LTR). */
html { --ang90: 90deg; --ang270: 270deg; --fx: 1; }
html[dir="ltr"] { --ang90: 270deg; --ang270: 90deg; --fx: -1; }
html[dir="ltr"] body { direction: ltr; }
button, input, select, textarea { font-family: inherit; }
.hidden { display: none !important; }
img { -webkit-user-drag: none; }
img.ic { display: inline-block; vertical-align: middle; object-fit: contain; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)); }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hi); text-decoration: underline; }
b, strong { font-weight: 800; }
.num, .tm { font-variant-numeric: tabular-nums; }

/* ============================================================ عناصر مشتركة */
/* إطار ذهبي مزخرف (زوايا) — يُضاف كعنصر .orn داخل اللوحة */
.orn { position: absolute; inset: 5px; pointer-events: none; z-index: 1;
  background-image: var(--orn-tl), var(--orn-tr), var(--orn-bl), var(--orn-br);
  background-position: top left, top right, bottom left, bottom right; background-repeat: no-repeat; background-size: 30px 30px; opacity: 0.9; }
.divider { height: 14px; margin: 10px auto; background: var(--orn-dia) center / 30px 14px no-repeat, var(--orn-line) center / 100% 14px no-repeat; }

.panel {
  position: relative;
  background: var(--tex-panel), var(--glass);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(var(--rgb-well), 0.55);
  backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2);
}

/* أزرار الأحجار الكريمة */
.btn {
  --b1: var(--btn-1); --b2: var(--btn-2); --b3: var(--btn-3); --bt: #fff; --bb: var(--btn-b);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
  padding: 8px 16px; min-height: 38px; border-radius: 11px; font-weight: 800; font-size: 14px; color: var(--bt);
  background: linear-gradient(180deg, var(--b1) 0%, var(--b2) 48%, var(--b3) 100%);
  border: 1px solid var(--bb); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(233, 196, 106, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: filter .15s, transform .08s, box-shadow .15s; white-space: nowrap; overflow: hidden;
}
.btn::after { content: ''; position: absolute; inset: 1px 1px 52% 1px; border-radius: 10px 10px 40% 40% / 10px 10px 12px 12px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)); pointer-events: none; }
.btn:hover { filter: brightness(1.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 230, 160, 0.85), 0 0 16px rgba(var(--rgb-glow), 0.45), 0 4px 12px rgba(0, 0, 0, 0.4); }
.btn:active { transform: translateY(1px); }
.btn:disabled { filter: var(--btn-off-filter); cursor: not-allowed; opacity: var(--btn-off-op); box-shadow: 0 0 0 1px var(--btn-off-ring); }
.btn:disabled::after { opacity: var(--btn-off-gloss); }
.btn img.ic { width: 20px; height: 20px; }
.btn.gold { --b1: #fff0b0; --b2: #e3b44e; --b3: #a8792a; --bt: #2a1a04; --bb: #6a4a10; text-shadow: 0 1px 0 rgba(255, 245, 200, 0.6); }
.btn.red, .btn.ruby { --b1: #ff8aa0; --b2: #d6334f; --b3: #8e1430; --bb: #4a0618; }
.btn.gem, .btn.amethyst { --b1: #d6b0ff; --b2: #9354ec; --b3: #5a23a8; --bb: #2a0c5a; }
.btn.green, .btn.emerald { --b1: #8af0c4; --b2: #22a874; --b3: #0d6a4a; --bb: #04382a; }
.btn.blue { --b1: #8fe0ff; --b2: #2d9fd6; --b3: #155e94; --bb: #06304d; }
.btn.ghost { background: rgba(var(--rgb-glow), 0.08); color: var(--cream); border-color: rgba(233, 196, 106, 0.4); box-shadow: none; text-shadow: none; }
.btn.ghost::after { display: none; }
.btn.ghost:hover { background: rgba(var(--rgb-glow), 0.18); color: #fff; }
.btn.small { padding: 4px 11px; min-height: 30px; font-size: 12.5px; border-radius: 9px; gap: 5px; }
.btn.small img.ic { width: 17px; height: 17px; }
.btn.big { padding: 12px 22px; min-height: 48px; font-size: 17px; width: 100%; border-radius: 13px; }
.btn.big img.ic { width: 26px; height: 26px; }
.btn.icon { padding: 0; width: 38px; min-height: 38px; }
.btn.small.icon { width: 30px; min-height: 30px; }

/* الحقول */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-size: 13px; font-weight: 700; color: var(--cream); }
.field input, .field select, .field textarea, .inp {
  padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(233, 196, 106, 0.35); background: rgba(var(--rgb-well), 0.55);
  font-size: 15px; color: var(--ivory); outline: none; transition: border-color .15s, box-shadow .15s; min-width: 0;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}
.inp { padding: 6px 10px; font-size: 14px; font-weight: 700; }
.inp.n { width: 84px; text-align: center; font-variant-numeric: tabular-nums; }
.inp.xy { width: 72px; text-align: center; direction: ltr; }
select.inp, .field select { cursor: pointer; }
select.inp option, .field select option { background: var(--opt-bg); color: var(--ivory); }
.field input:focus, .field textarea:focus, .inp:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(233, 196, 106, 0.2), inset 0 2px 6px rgba(0, 0, 0, 0.35); }
.field input::placeholder, .inp::placeholder, textarea::placeholder { color: rgba(var(--rgb-hair), 0.55); }
.err { color: var(--bad); font-size: 13px; min-height: 18px; font-weight: 700; }

/* شرائح وأقراص */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: rgba(233, 196, 106, 0.14); color: var(--gold); border: 1px solid rgba(233, 196, 106, 0.38); white-space: nowrap; vertical-align: middle; }
.pill img.ic { width: 14px; height: 14px; }
.pill.green { background: rgba(63, 211, 154, 0.15); color: var(--ok); border-color: rgba(63, 211, 154, 0.45); }
.pill.red { background: rgba(224, 64, 90, 0.16); color: var(--bad); border-color: rgba(224, 64, 90, 0.5); }
.pill.blue { background: rgba(var(--rgb-glow), 0.18); color: var(--tint2); border-color: rgba(var(--rgb-glow), 0.5); }
.pill.violet { background: rgba(164, 108, 245, 0.18); color: #dcc4ff; border-color: rgba(164, 108, 245, 0.5); }
.pill.solid { background: linear-gradient(180deg, #f6d98a, #c99a3c); color: #2a1a04; border-color: #6a4a10; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; padding-inline: 10px 8px; border-radius: 999px; background: rgba(var(--rgb-well), 0.5); border: 1px solid rgba(233, 196, 106, 0.3); font-size: 12.5px; font-weight: 700; white-space: nowrap; color: var(--cream); }
.chip img.ic { width: 18px; height: 18px; }
.chip.prot { border-color: var(--prot-line); color: var(--prot-fg); background: var(--prot-bg); }   /* VIS4-02: theme tokens */
.chip.warn { border-color: #ff5a6a; color: #ffd0d6; background: rgba(130, 10, 30, 0.6); animation: pulse 1.2s infinite; cursor: pointer; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 80, 100, 0.6); } 50% { box-shadow: 0 0 0 7px rgba(255, 80, 100, 0); } }

.badge { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 19px; height: 19px; border-radius: 10px; background: linear-gradient(180deg, #ff6a80, #c0183a); color: #fff; font-size: 11px; font-weight: 900; display: grid; place-items: center; padding: 0 5px; border: 1.5px solid #ffe6b0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); z-index: 2; }
.badge.green { background: linear-gradient(180deg, #6af0b4, #129a64); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3fd39a; box-shadow: 0 0 6px rgba(63, 211, 154, 0.8); vertical-align: middle; flex: none; }
.dot.off { background: var(--off); box-shadow: none; }
.dot.red { background: #ff4a64; box-shadow: 0 0 6px rgba(255, 74, 100, 0.8); }

/* ============================================================ شاشة الدخول */
#login {
  position: fixed; inset: 0; overflow: auto; z-index: 20;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--rgb-glow), 0.28), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(233, 196, 106, 0.16), transparent 70%),
    var(--tex-sky) 0 0 / var(--tex-sky-size),
    linear-gradient(180deg, var(--login-1) 0%, var(--login-2) 55%, var(--night) 100%);
  display: flex; flex-direction: column; align-items: center; padding: 30px 16px 60px;
}
#login::before { content: ''; position: fixed; inset: 0; background: var(--tex-grain); opacity: 0.08; pointer-events: none; }
#login .ridge { position: fixed; left: 0; right: 0; bottom: 0; height: 32vh; pointer-events: none; opacity: 0.85; }
#login .ridge svg { width: 100%; height: 100%; display: block; }
.login-inner { position: relative; z-index: 1; width: min(1100px, 100%); display: flex; flex-direction: column; }
/* النموذج أولاً (فوق الطيّة على كل الشاشات) ثم بطاقات القبائل للتعرّف عليها — القبيلة تُختار من النموذج أو البطاقات */
.login-inner .auth-box { order: 2; width: 100%; }
.login-inner .tribes { order: 3; margin: 22px 0 0; }
.logo { text-align: center; margin-bottom: 6px; }
.logo .crest { width: 84px; height: 84px; filter: drop-shadow(0 0 22px rgba(233, 196, 106, 0.55)); animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-5px); } }
.logo h1 { font-family: var(--title); font-size: clamp(40px, 7.5vw, 76px); margin: 2px 0 0; letter-spacing: 1px; line-height: 1.15;
  background: linear-gradient(180deg, #fff6cf 10%, #f0cf7a 45%, #b8862e 85%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(40, 24, 4, 0.85)) drop-shadow(0 0 26px rgba(233, 196, 106, 0.35)); }
.logo p { margin: 4px auto 0; color: var(--muted); font-size: 16px; max-width: 640px; line-height: 1.7; }
.stats-line { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 10px 0 20px; }
.tribes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }
.tribe-card {
  position: relative; border-radius: 18px; padding: 14px 16px 16px; cursor: pointer; overflow: hidden;
  background: var(--glass); border: 1px solid var(--line); transition: transform .2s, border-color .2s, box-shadow .2s;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.tribe-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, transparent, var(--tc, var(--gold)), transparent); }
.tribe-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.tribe-card.sel { border-color: var(--gold-hi); box-shadow: 0 0 0 2px rgba(233, 196, 106, 0.6), 0 0 34px rgba(233, 196, 106, 0.28), var(--shadow); }
.tribe-card .tick { position: absolute; top: 12px; inset-inline-end: 12px; opacity: 0; transform: scale(0.6); transition: .2s; }
.tribe-card.sel .tick { opacity: 1; transform: none; }
.tribe-card h3 { margin: 0; font-family: var(--title); font-size: 27px; color: var(--tc2, var(--gold)); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); }
.tribe-card .sub { font-size: 13px; color: var(--muted); }
.tribe-card canvas { width: 100%; height: 124px; display: block; margin: 8px 0; border-radius: 12px; border: 1px solid rgba(233, 196, 106, 0.25); background: var(--sap); }
.tribe-card p { font-size: 13px; line-height: 1.75; margin: 6px 0; color: var(--cream); }
.tribe-card ul { margin: 6px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--tint); display: flex; flex-direction: column; gap: 3px; }
.tribe-card li { display: flex; gap: 6px; align-items: flex-start; }
.tribe-card li img.ic { margin-top: 2px; }
.auth-box {
  position: relative; max-width: 470px; margin: 0 auto; padding: 22px 24px 20px; border-radius: 18px;
  background: var(--glass); border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 40px rgba(var(--rgb-glow), 0.12);
}
.auth-tabs { position: relative; z-index: 2; display: flex; gap: 4px; margin-bottom: 14px; padding: 4px; border-radius: 13px; background: rgba(var(--rgb-well), 0.55); border: 1px solid rgba(233, 196, 106, 0.25); }
.auth-tabs button { flex: 1; padding: 9px; border-radius: 10px; border: 0; background: transparent; font-weight: 800; font-size: 15px; color: var(--muted); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.auth-tabs button.on { background: linear-gradient(180deg, var(--tab-1), var(--tab-2)); color: #fff; box-shadow: 0 0 0 1px rgba(233, 196, 106, 0.6), 0 2px 10px rgba(0, 0, 0, 0.4); }
#auth-form { position: relative; z-index: 2; }
#tribe-pick-label { flex-direction: column; align-items: stretch; gap: 7px; }
#tribe-pick-label .tp-h { display: inline-flex; align-items: center; gap: 6px; }
.tchips { display: flex; gap: 6px; flex-wrap: wrap; }
.tchips button { flex: 1; min-width: 92px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 11px; cursor: pointer; font-weight: 800; font-size: 14px;
  color: var(--cream); background: rgba(var(--rgb-well), 0.5); border: 1px solid rgba(var(--rgb-hair), 0.22); transition: .15s; }
.tchips button .sw { width: 12px; height: 12px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 8px var(--tc); flex: none; }
.tchips button.on { color: #fff; border-color: var(--gold-hi); background: linear-gradient(180deg, rgba(var(--rgb-sap-hi), 0.55), rgba(var(--rgb-sap), 0.55)); box-shadow: 0 0 0 1px rgba(233, 196, 106, 0.5); }
/* «لدي مملكة»: بطاقات القبائل مطوية والنموذج مباشرة تحت الشعار */
#login.mode-login .tribes { display: none; }

/* ============================================================ اللعبة */
#game { position: fixed; inset: 0; background: var(--night); }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }

/* الموارد */
#res-panel { position: absolute; top: 10px; left: 10px; padding: 7px; display: flex; flex-direction: column; gap: 5px; z-index: 5; min-width: 186px; direction: ltr; }
.res {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 3px 10px 5px 4px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(var(--rgb-well), 0.6), rgba(var(--rgb-deep), 0.45)); border: 1px solid rgba(var(--rgb-hair), 0.16); overflow: hidden; cursor: default;
}
.res .sock { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: radial-gradient(circle at 50% 35%, rgba(var(--rgb-glow), 0.35), rgba(var(--rgb-deep), 0.2) 70%); }
.res img.ic { width: 30px; height: 30px; }
.res .val { font-weight: 800; font-size: 16px; color: var(--ivory); letter-spacing: .3px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 1px #000; }
.res .rate { font-size: 11px; color: var(--ok); margin-inline-start: auto; font-weight: 800; }
.res .rate.neg { color: var(--bad); }
.res .bar { position: absolute; left: 6px; right: 6px; bottom: 2px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.res .bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--bar-1), var(--bar-2) 60%, #f0cf7a); transition: width .5s; }
.res.full .bar i { background: linear-gradient(90deg, #ff5a6a, #ffb04a); }
.res.full .val { color: #ffc0a0; }
.res.gold .val { color: #ffd76a; }
.res.gems .val { color: #d9bcff; }
.res.gold, .res.gems { cursor: pointer; }
.res.gold:hover, .res.gems:hover { border-color: var(--line); }

/* الشريط العلوي: لوحة اسم القرية */
#top-bar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); padding: 6px 14px 6px 10px; padding-inline: 14px 10px; display: flex; align-items: center; gap: 9px; z-index: 5; max-width: calc(100% - 600px); border-radius: 16px; }
#top-bar::before, #top-bar::after { content: ''; position: absolute; top: 50%; width: 14px; height: 14px; background: var(--orn-dia) center / 30px 14px no-repeat; transform: translateY(-50%); }
#top-bar::before { right: -22px; }
#top-bar::after { left: -22px; }
#top-bar .vname { display: inline-flex; align-items: center; gap: 6px; font-family: var(--title); font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  background: linear-gradient(180deg, #fff3c8, #e9c46a 60%, #c4923a); -webkit-background-clip: text; background-clip: text; color: transparent; }
#top-bar .vname img.ic { width: 26px; height: 26px; }
#top-bar select { background: rgba(var(--rgb-well), 0.6); color: var(--ivory); border: 1px solid rgba(233, 196, 106, 0.45); border-radius: 9px; padding: 4px 8px; font-size: 13.5px; font-weight: 700; max-width: 260px; cursor: pointer; }
#top-bar select option { background: var(--opt-bg); }
#top-bar .vtitle { display: inline-flex; align-items: center; gap: 9px; min-width: 0; position: relative; }
#top-bar .vdrop { display: none; width: 16px; height: 16px; flex: none; opacity: .85; }

/* العمود الأيمن: الخريطة المصغرة والأزرار والدردشة */
#right-col { position: absolute; top: 10px; right: 10px; width: 262px; z-index: 5; display: flex; flex-direction: column; gap: 8px; max-height: calc(100% - 128px); }
#mini-wrap { position: relative; padding: 5px; }
#mini { width: 100%; height: 124px; display: block; border-radius: 10px; cursor: pointer; background: var(--mini-bg); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, 0.3); }
#mini-wrap .coords { position: absolute; bottom: 10px; left: 11px; font-size: 11px; font-weight: 800; color: var(--ivory); background: rgba(var(--rgb-well), 0.7); padding: 1px 7px; border-radius: 7px; direction: ltr; border: 1px solid rgba(233, 196, 106, 0.3); }
#side-icons { position: absolute; top: 0; right: calc(100% + 8px); display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 46px); gap: 6px; max-height: calc(100vh - 150px); }
.ico-btn {
  position: relative; width: 44px; height: 44px; border-radius: 13px; cursor: pointer; display: grid; place-items: center; padding: 0;
  background: radial-gradient(circle at 50% 30%, var(--gem-hi), var(--gem-mid) 70%); border: 1px solid rgba(233, 196, 106, 0.7); color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -3px 6px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.5); transition: transform .12s, filter .12s, box-shadow .12s;
}
.ico-btn:hover { transform: translateY(-1px); filter: brightness(1.15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 14px rgba(var(--rgb-glow), 0.55), 0 4px 12px rgba(0, 0, 0, 0.5); }
.ico-btn img.ic { width: 30px; height: 30px; }
.ico-btn .lbl { display: none; }
.ico-btn.test { background: radial-gradient(circle at 50% 30%, #2f8f6a, #0d3a2c 70%); }
#side-more { display: none; }

/* الدردشة */
#chat { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#chat .tabs { display: flex; border-bottom: 1px solid rgba(233, 196, 106, 0.25); padding: 4px 4px 0; gap: 2px; }
#chat .tabs button { flex: 1; padding: 7px 4px; font-size: 12.5px; font-weight: 800; color: var(--muted); background: transparent; border: 0; border-radius: 9px 9px 0 0; cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
#chat .tabs button.on { color: var(--gold); background: linear-gradient(180deg, rgba(var(--rgb-glow), 0.22), rgba(var(--rgb-glow), 0.05)); box-shadow: inset 0 -2px 0 var(--gold); }
#chat .tabs button .dot { background: #ff4a64; box-shadow: 0 0 6px rgba(255, 74, 100, 0.8); width: 7px; height: 7px; }
#chat .msgs { height: 176px; overflow-y: auto; padding: 6px 9px; font-size: 13px; line-height: 1.6; user-select: text; }
#chat .msg { margin-bottom: 4px; word-wrap: break-word; padding: 3px 6px; border-radius: 8px; }
#chat .msg:hover { background: rgba(var(--rgb-glow), 0.08); }
#chat .msg b { cursor: pointer; }
#chat .msg .t { color: var(--muted2); font-size: 10.5px; margin-inline-end: 5px; }
#chat .msg .tag { color: var(--aqua); font-size: 11px; font-weight: 800; }
#chat form { display: flex; gap: 5px; padding: 6px; border-top: 1px solid rgba(233, 196, 106, 0.18); }
#chat input { flex: 1; min-width: 0; background: rgba(var(--rgb-well), 0.55); color: var(--ivory); border: 1px solid rgba(233, 196, 106, 0.3); border-radius: 9px; padding: 6px 9px; font-size: 13px; outline: none; }
#chat input:focus { border-color: var(--gold); }
#chat .online-list { height: 176px; overflow-y: auto; padding: 6px 9px; font-size: 13px; }
#chat .online-list div { padding: 3px 4px; display: flex; align-items: center; gap: 7px; border-radius: 7px; }
#chat .online-list div:hover { background: rgba(var(--rgb-glow), 0.1); }
#chat .empty { padding: 14px 8px; }
#chat-toggle { display: none; }

/* الأحداث */
#events { position: absolute; bottom: 112px; left: 10px; width: 300px; max-height: calc(100% - 440px); min-height: 0; overflow-y: auto; padding: 7px; z-index: 5; display: flex; flex-direction: column; gap: 5px; }
#events:empty { display: none; }
#game:has(#tile-panel:not(.hidden)) #events { display: none; }
.ev { display: flex; align-items: center; gap: 8px; padding: 5px 9px 6px; border-radius: 10px; background: rgba(var(--rgb-well), 0.45); border: 1px solid rgba(var(--rgb-hair), 0.14); font-size: 12.5px; cursor: pointer; position: relative; overflow: hidden; transition: border-color .12s, background .12s; }
.ev:hover { border-color: rgba(233, 196, 106, 0.6); background: rgba(var(--rgb-navy), 0.45); }
.ev .ic-w { width: 30px; height: 30px; flex: none; display: grid; place-items: center; }
.ev .ic-w img { width: 30px; height: 30px; object-fit: contain; }
.ev .tx { flex: 1; min-width: 0; line-height: 1.35; }
.ev .tx b { color: var(--gold-hi); }
.ev .tx small { color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev .tm { font-weight: 800; color: var(--gold-hi); direction: ltr; }
.ev .pb { position: absolute; bottom: 0; inset-inline-start: 0; height: 2px; background: linear-gradient(var(--ang270), var(--sap-glow), #f0cf7a); box-shadow: 0 0 6px rgba(240, 207, 122, 0.6); }
.ev.in { background: linear-gradient(var(--ang90), rgba(150, 14, 40, 0.65), rgba(90, 8, 24, 0.55)); border-color: #ff5a6a; animation: pulse 1.4s infinite; }
.ev.in .tm { color: #ffc4cc; }
.ev.back .tm { color: var(--tint); }
.ev-h { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--gold); font-weight: 800; padding: 3px 4px 0; letter-spacing: .3px; }
/* القائمة تتمرر بدل أن تنضغط الصفوف فتتراكب سطورها */
.ev, .ev-h { flex-shrink: 0; }
.ev-h::after { content: ''; flex: 1; height: 1px; background: linear-gradient(var(--ang270), rgba(233, 196, 106, 0.4), transparent); }

/* الشريط السفلي (المرفأ الملكي) */
#bottom-bar { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: flex-end; z-index: 6; padding: 9px 18px 7px; border-radius: 24px; }
#bottom-bar::before { content: ''; position: absolute; left: 30px; right: 30px; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-hi), transparent); opacity: .7; }
.act { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; background: none; border: 0; color: var(--ivory); padding: 0; position: relative; }
.act .circ {
  position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 28%, var(--orb-1), var(--orb-2) 62%, var(--orb-3) 100%);
  border: 2px solid #e9c46a; box-shadow: inset 0 2px 8px rgba(var(--rgb-hair), 0.35), inset 0 -4px 8px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(var(--rgb-deep), 0.9), 0 0 0 4px rgba(233, 196, 106, 0.35), 0 6px 14px rgba(0, 0, 0, 0.6);
  transition: transform .14s, box-shadow .14s;
}
.act .circ img.ic { width: 38px; height: 38px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }
.act:hover .circ { transform: translateY(-3px) scale(1.05); box-shadow: inset 0 2px 8px rgba(var(--rgb-hair), 0.35), 0 0 0 3px rgba(var(--rgb-deep), 0.9), 0 0 0 4px rgba(255, 230, 160, 0.7), 0 0 22px rgba(var(--rgb-glow), 0.55), 0 6px 14px rgba(0, 0, 0, 0.6); }
.act span { font-size: 12px; font-weight: 800; text-shadow: 0 1px 2px #000; color: var(--cream); }
.act.main .circ { width: 70px; height: 70px; background: radial-gradient(circle at 50% 28%, var(--main-1), var(--main-2) 62%, var(--main-3) 100%); }
.act.main .circ img.ic { width: 46px; height: 46px; }
.act .badge { top: -4px; inset-inline-end: 2px; }

/* التلميح */
#tooltip { position: fixed; z-index: 50; pointer-events: none; padding: 7px 11px; border-radius: 11px; font-size: 13px; max-width: 290px; line-height: 1.6; }
#tooltip b { color: var(--gold); }
#tooltip img.ic { width: 16px; height: 16px; }

/* لوحة المربع على الخريطة */
#tile-panel { position: absolute; left: 10px; top: 286px; width: 310px; padding: 14px; z-index: 6; max-height: calc(100% - 410px); overflow-y: auto; }
#tile-panel h3 { margin: 0 0 4px; font-family: var(--title); color: var(--gold); font-size: 21px; display: flex; align-items: center; gap: 7px; padding-inline-end: 30px; }
#tile-panel .meta { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
#tile-panel .x { position: absolute; top: 8px; inset-inline-end: 8px; cursor: pointer; background: none; border: 0; padding: 2px; border-radius: 50%; z-index: 2; }
#tile-panel .x:hover { filter: brightness(1.2); }
#tile-panel p { font-size: 13px; line-height: 1.7; margin: 6px 0; color: var(--cream); }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }
.acts .btn { justify-content: flex-start; }
.guards { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.u-chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(var(--rgb-well), 0.45); border-radius: 10px; padding: 2px 9px 2px 4px; padding-inline: 9px 4px; font-size: 12.5px; border: 1px solid rgba(var(--rgb-hair), 0.18); }
.u-chip img { width: 38px; height: 38px; }
.u-chip b { color: var(--gold-hi); }
.stars { display: inline-flex; gap: 1px; vertical-align: middle; }

#zoom-ctl { position: absolute; bottom: 116px; right: 12px; display: flex; flex-direction: column; gap: 7px; z-index: 5; }

/* ============================================================ النوافذ */
#modal-root { position: fixed; inset: 0; z-index: 40; display: none; }
#modal-root.open { display: block; }
.backdrop { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(var(--rgb-deep), 0.55), rgba(var(--rgb-well), 0.8)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade .16s; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: translate(-50%, -47%) scale(0.965); opacity: 0; } }
.modal {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(820px, calc(100% - 20px)); max-height: calc(100% - 28px);
  display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; animation: pop .2s ease-out; color: var(--ivory);
  background:
    radial-gradient(120% 70% at 50% -12%, rgba(var(--rgb-glow), 0.3), transparent 62%),
    var(--tex-sky) 0 0 / var(--tex-sky-size),
    linear-gradient(180deg, var(--modal-1) 0%, var(--modal-2) 55%, var(--modal-3) 100%);
  border: 1px solid rgba(240, 207, 122, 0.75);
  box-shadow: 0 0 0 4px rgba(var(--rgb-deep), 0.92), 0 0 0 5px rgba(233, 196, 106, 0.38), 0 30px 80px rgba(0, 0, 0, 0.75), 0 0 70px rgba(var(--rgb-glow), 0.16);
}
.modal::before { content: ''; position: absolute; inset: 0; background: var(--tex-grain); opacity: 0.06; pointer-events: none; z-index: 0; }
.modal > * { position: relative; z-index: 1; }
.modal > .orn { position: absolute; z-index: 3; }
.modal.wide { width: min(1060px, calc(100% - 20px)); }
.modal.narrow { width: min(540px, calc(100% - 20px)); }
.modal-h { display: flex; align-items: center; gap: 12px; padding: 14px 20px 12px; background: linear-gradient(180deg, rgba(var(--rgb-sap), 0.55), rgba(var(--rgb-navy-lo), 0.2)); }
.modal-h::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 14px; background: var(--orn-dia) center / 30px 14px no-repeat, var(--orn-line) center / 100% 14px no-repeat; z-index: 2; }
.modal-h .medal { position: relative; width: 50px; height: 50px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--gem-hi), var(--gem-lo) 72%); box-shadow: 0 0 0 2px #e9c46a, 0 0 0 4px rgba(var(--rgb-deep), 0.9), 0 0 0 5px rgba(233, 196, 106, 0.4), 0 0 18px rgba(var(--rgb-glow), 0.45); }
.modal-h .medal img { width: 40px; height: 40px; object-fit: contain; }
.modal-h .mh-t { flex: 1; min-width: 0; }
.modal-h h2 { margin: 0; font-family: var(--title); font-size: 25px; line-height: 1.25; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  color: var(--gold); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7), 0 0 18px rgba(233, 196, 106, 0.25); }
.modal-h .mh-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.modal-h .close { background: none; border: 0; cursor: pointer; padding: 3px; border-radius: 50%; transition: transform .12s, filter .12s; flex: none; }
.modal-h .close:hover { transform: rotate(8deg) scale(1.08); filter: brightness(1.2); }
.modal-h .close img { width: 32px; height: 32px; }
.modal-b { padding: 18px 20px 20px; overflow-y: auto; user-select: text; flex: 1; min-height: 0; }
.modal-tabs { display: flex; gap: 6px; padding: 14px 16px 8px; flex-wrap: wrap; justify-content: center; }
.modal-tabs button {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; cursor: pointer; font-size: 13.5px; font-weight: 800;
  background: rgba(var(--rgb-well), 0.45); color: var(--muted); border: 1px solid rgba(var(--rgb-hair), 0.22); transition: .14s;
}
.modal-tabs button img.ic { width: 20px; height: 20px; }
.modal-tabs button:hover { color: var(--ivory); border-color: rgba(233, 196, 106, 0.5); }
.modal-tabs button.on { color: #fff; background: linear-gradient(180deg, var(--tab-1), var(--tab-2)); border-color: rgba(240, 207, 122, 0.9); box-shadow: 0 0 14px rgba(var(--rgb-glow), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.modal p { line-height: 1.8; margin: 6px 0; }
.lead { font-size: 14px; color: var(--muted); }
.sec { margin-top: 16px; }
.sec h4, .modal h4 { margin: 0 0 10px; font-family: var(--title); font-size: 19px; color: var(--gold); display: flex; align-items: center; gap: 8px; font-weight: 700; }
.sec h4::after, .modal h4.line::after { content: ''; flex: 1; height: 1px; background: linear-gradient(var(--ang270), rgba(233, 196, 106, 0.45), transparent); }
.sec h4 img.ic { width: 24px; height: 24px; }
.card { position: relative; padding: 12px 14px; border-radius: 14px; background: var(--glass-2); border: 1px solid rgba(var(--rgb-hair), 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }

/* الكلفة: شرائح موارد بأيقونات ثلاثية الأبعاد */
.cost { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-weight: 800; font-size: 14px; }
.cost .cc { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 6px; padding-inline: 10px 6px; border-radius: 999px; background: rgba(var(--rgb-well), 0.5); border: 1px solid rgba(var(--rgb-hair), 0.2); font-variant-numeric: tabular-nums; }
.cost .cc img.ic { width: 22px; height: 22px; }
.cost .cc.no { color: var(--bad); border-color: rgba(255, 90, 110, 0.55); background: rgba(120, 10, 30, 0.35); }
.cost .cc.t { color: var(--cream); }
.cost.sm { font-size: 12.5px; gap: 4px; }
.cost.sm .cc { padding: 1px 8px 1px 4px; padding-inline: 8px 4px; }
.cost.sm .cc img.ic { width: 17px; height: 17px; }
.req { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; padding: 3px 10px 3px 6px; padding-inline: 10px 6px; border-radius: 999px; color: var(--bad); background: rgba(120, 10, 30, 0.3); border: 1px solid rgba(255, 90, 110, 0.45); margin: 2px 0; }
.req img.ic { width: 18px; height: 18px; }
.req.ok { color: var(--ok); background: rgba(13, 106, 74, 0.3); border-color: rgba(63, 211, 154, 0.45); }
.reqs { display: flex; flex-wrap: wrap; gap: 6px; }

/* قائمة المباني */
.bld-group { margin-bottom: 16px; }
.bld-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; }
.bld-card { position: relative; display: flex; gap: 10px; padding: 10px 12px 10px 10px; padding-inline: 12px 10px; border-radius: 14px; cursor: pointer; overflow: hidden;
  background: var(--glass-2); border: 1px solid rgba(var(--rgb-hair), 0.18); transition: transform .12s, box-shadow .12s, border-color .12s; }
.bld-card::before { content: ''; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 4px; background: var(--acc); box-shadow: 0 0 12px var(--acc); }
.bld-card:hover { transform: translateY(-2px); border-color: rgba(233, 196, 106, 0.6); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 18px rgba(var(--rgb-glow), 0.18); }
.bld-card.focus { border-color: var(--gold-hi); box-shadow: 0 0 0 2px rgba(233, 196, 106, 0.6), 0 0 22px rgba(233, 196, 106, 0.3); }
.bld-card.dis { opacity: 0.6; }
.bld-card .bi-w { width: 70px; height: 70px; flex: none; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 40%, var(--sap2), rgba(var(--rgb-deep), 0.2) 70%); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--acc) 35%, var(--sap)), rgba(var(--rgb-deep), 0.2) 70%); }
.bld-card .bi-w img { width: 66px; height: 66px; }
.bld-card h5 { margin: 0 0 3px; font-size: 15.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--ivory); }
.bld-card .d { font-size: 12px; color: var(--muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bld-card .st { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; }

/* ============================================================ نافذة المبنى (§13) */
.modal.bld .modal-b { padding-top: 14px; }
.bld-hero { display: grid; grid-template-columns: 250px 1fr; gap: 20px; align-items: center; }
.pedestal { position: relative; height: 236px; display: grid; place-items: end center; }
.pedestal .glow { position: absolute; left: 50%; top: 44%; width: 230px; height: 200px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--acc) 55%, transparent) 0%, rgba(var(--rgb-glow), 0.18) 45%, transparent 70%); filter: blur(4px); }
.pedestal .rays { position: absolute; left: 50%; top: 42%; width: 260px; height: 260px; transform: translate(-50%, -50%); opacity: .35;
  background: repeating-conic-gradient(from 0deg, rgba(255, 240, 184, 0.35) 0 4deg, transparent 4deg 18deg); border-radius: 50%; -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); animation: spin 60s linear infinite; }
.pedestal .base { position: absolute; bottom: 8px; left: 50%; width: 214px; height: 58px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, var(--orb-1) 0%, var(--orb-2) 55%, var(--orb-3) 100%);
  box-shadow: 0 0 0 2px #e9c46a, 0 0 0 5px rgba(var(--rgb-deep), 0.9), 0 0 0 6px rgba(233, 196, 106, 0.45), 0 14px 26px rgba(0, 0, 0, 0.6), inset 0 6px 12px rgba(var(--rgb-hair), 0.25); }
.pedestal .base::after { content: ''; position: absolute; left: 12%; right: 12%; top: 12%; height: 40%; border-radius: 50%; border-top: 1px solid rgba(255, 240, 184, 0.45); }
.pedestal .bimg { position: relative; z-index: 2; width: 220px; height: 220px; object-fit: contain; margin-bottom: 22px; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.55)); transition: transform .3s; }
.pedestal:hover .bimg { transform: translateY(-3px) scale(1.02); }
.pedestal.plan .bimg { filter: grayscale(1) sepia(1) hue-rotate(185deg) saturate(2.4) brightness(0.95) drop-shadow(0 0 10px rgba(var(--rgb-glow), 0.8)); opacity: 0.72; }
.pedestal.locked .bimg { filter: grayscale(1) brightness(0.55) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6)); }
.pedestal .lock { position: absolute; z-index: 3; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 70px; height: 70px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8)); }
.pedestal .ribbon { position: absolute; z-index: 3; bottom: 0; left: 50%; transform: translateX(-50%); padding: 3px 14px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap;
  background: linear-gradient(180deg, #f6d98a, #c99a3c); color: #2a1a04; border: 1px solid #6a4a10; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5); }
.lvl-ring { position: absolute; z-index: 4; top: 4px; inset-inline-start: 2px; width: 74px; height: 74px; display: grid; place-items: center; }
.lvl-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.lvl-ring .in { position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; align-content: center; line-height: 1;
  background: radial-gradient(circle at 50% 30%, var(--orb-1), var(--gem-lo) 75%); box-shadow: inset 0 2px 6px rgba(var(--rgb-hair), 0.3), 0 4px 10px rgba(0, 0, 0, 0.5); }
.lvl-ring .in b { font-size: 23px; font-weight: 900; color: var(--gold-hi); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); }
.lvl-ring .in small { font-size: 10.5px; font-weight: 800; color: var(--muted); }
.bld-id .kicker { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.bld-id .lead { margin: 4px 0 10px; color: var(--cream); line-height: 1.8; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.stat { position: relative; padding: 9px 11px 8px; border-radius: 12px; background: rgba(var(--rgb-well), 0.45); border: 1px solid rgba(var(--rgb-hair), 0.16); display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; }
.stat::before { content: ''; position: absolute; top: 0; left: 10px; right: 10px; height: 1px; background: linear-gradient(90deg, transparent, rgba(233, 196, 106, 0.6), transparent); }
.stat .k { font-size: 11.5px; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 5px; min-width: 0; }
/* نص التسمية في عنصر خاص (سطران كحد أقصى) بدل قصّه بلا نقاط داخل الحاوية المرنة */
.stat .k > span { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; overflow-wrap: anywhere; }
.stat .k img.ic { width: 18px; height: 18px; }
.stat b { font-size: 18px; color: var(--ivory); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat i { font-style: normal; font-size: 12px; font-weight: 800; color: var(--ok); }
.stat.up { border-color: rgba(63, 211, 154, 0.35); background: linear-gradient(180deg, rgba(13, 106, 74, 0.22), rgba(var(--rgb-well), 0.45)); }
.stat.up b { color: #b8ffe0; }
.stat.gold { border-color: rgba(233, 196, 106, 0.45); }
.stat.gold b { color: var(--gold-hi); }
.up-card { margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(180deg, rgba(var(--rgb-sap), 0.38), rgba(var(--rgb-deep), 0.5)); border: 1px solid rgba(233, 196, 106, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.up-card .uh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.up-card .uh h4 { margin: 0; font-size: 18px; }
.up-card .uh .spacer { flex: 1; }
.up-card .go { display: flex; gap: 10px; align-items: stretch; margin-top: 12px; flex-wrap: wrap; }
.btn.xl { flex: 1; min-width: 230px; min-height: 56px; padding: 8px 18px; border-radius: 15px; font-size: 18px; justify-content: space-between; }
.btn.xl .lbl { display: inline-flex; align-items: center; gap: 9px; }
.btn.xl img.ic { width: 32px; height: 32px; }
.btn.xl .t { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 15px; background: rgba(var(--rgb-well), 0.35); border: 1px solid rgba(255, 255, 255, 0.25); direction: ltr; }
.btn.xl .t img.ic { width: 20px; height: 20px; }
.wait { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; margin-top: 8px; }
.wait b { color: var(--gold-hi); direction: ltr; }
.sec-tabs { position: sticky; top: -14px; z-index: 5; margin: 18px -20px 0; padding: 10px 16px 8px; background: linear-gradient(180deg, rgba(var(--rgb-deep), 0.97), rgba(var(--rgb-deep), 0.88)); border-top: 1px solid rgba(233, 196, 106, 0.2); border-bottom: 1px solid rgba(233, 196, 106, 0.2); }
.lvl-tbl td:first-child, .lvl-tbl th:first-child { width: 60px; text-align: center; }
.lvl-tbl tr.cur td { background: rgba(233, 196, 106, 0.12); }
.lvl-tbl tr.tier td:first-child { color: var(--gold-hi); }

/* الجداول */
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.tbl th { text-align: start; background: rgba(var(--rgb-sap), 0.55); padding: 8px 9px; color: var(--gold); font-weight: 800; position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.tbl th:first-child { border-radius: 0; border-start-start-radius: 10px; border-end-start-radius: 10px; }
.tbl th:last-child { border-radius: 0; border-start-end-radius: 10px; border-end-end-radius: 10px; }
.tbl td { padding: 7px 9px; border-bottom: 1px solid rgba(var(--rgb-hair), 0.1); vertical-align: middle; }
.tbl tr.me td { background: rgba(233, 196, 106, 0.16); font-weight: 800; }
.tbl tr:hover td { background: rgba(var(--rgb-glow), 0.1); }
.tbl .num { font-weight: 800; }
.tbl .pos { width: 46px; text-align: center; font-weight: 900; color: var(--muted); }
.tbl .pos img.ic { width: 28px; height: 28px; }
.mini-tbl td, .mini-tbl th { padding: 5px 7px; }
.who { display: inline-flex; align-items: center; gap: 6px; }

/* الوحدات */
.unit-row { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: center; padding: 12px; border-radius: 16px; background: var(--glass-2); border: 1px solid rgba(var(--rgb-hair), 0.18); margin-bottom: 10px; }
.unit-row.locked { opacity: 0.72; }
.unit-row img.u { width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(var(--rgb-glow), 0.45), rgba(var(--rgb-deep), 0.3) 70%); box-shadow: 0 0 0 2px rgba(233, 196, 106, 0.6), 0 0 0 4px rgba(var(--rgb-deep), 0.8), 0 4px 10px rgba(0, 0, 0, 0.5); }
.unit-row h5 { margin: 0; font-size: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.unit-row .have { font-size: 12px; color: var(--muted); font-weight: 700; }
.unit-row .have b { color: var(--gold-hi); }
.unit-row .d { font-size: 12.5px; color: var(--muted); margin: 3px 0 6px; line-height: 1.6; }
.stats { display: flex; gap: 5px; flex-wrap: wrap; font-size: 12.5px; font-weight: 800; color: var(--cream); margin-bottom: 6px; }
.stats span { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 4px; padding-inline: 8px 4px; border-radius: 999px; background: rgba(var(--rgb-well), 0.4); border: 1px solid rgba(var(--rgb-hair), 0.12); }
.stats img.ic { width: 18px; height: 18px; }
.stats small { color: var(--ok); }
.train-ctl { display: flex; flex-direction: column; gap: 7px; align-items: stretch; min-width: 168px; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper .inp { flex: 1; width: 60px; text-align: center; font-size: 16px; font-weight: 900; }
.q-list { display: flex; flex-direction: column; gap: 7px; }
.q-item { display: flex; align-items: center; gap: 10px; padding: 7px 11px; border-radius: 12px; background: rgba(var(--rgb-well), 0.42); border: 1px solid rgba(var(--rgb-hair), 0.16); font-size: 13.5px; flex-wrap: wrap; }
.q-item img { width: 38px; height: 38px; object-fit: contain; }
.q-item .grow { flex: 1; min-width: 120px; }
.q-item .tm { font-weight: 900; direction: ltr; color: var(--gold-hi); }
.troop-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.tp { display: flex; align-items: center; gap: 7px; padding: 7px; border-radius: 12px; background: var(--glass-2); border: 1px solid rgba(var(--rgb-hair), 0.18); }
.tp img { width: 54px; height: 54px; flex: none; }
.tp .nm { font-size: 12.5px; font-weight: 800; line-height: 1.25; }
.tp .have { font-size: 11.5px; color: var(--aqua); cursor: pointer; font-weight: 700; }
.tp .have:hover { text-decoration: underline; }
.tp input { width: 66px; }
.modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.mode { position: relative; padding: 9px 11px; border-radius: 14px; border: 1px solid rgba(var(--rgb-hair), 0.2); background: var(--glass-2); cursor: pointer; font-size: 12px; line-height: 1.5; color: var(--muted); transition: .12s; }
.mode b { display: flex; align-items: center; gap: 6px; font-size: 15px; margin-bottom: 3px; color: var(--ivory); }
.mode b img.ic { width: 30px; height: 30px; }
.mode:hover { border-color: rgba(233, 196, 106, 0.55); }
.mode.on { border-color: var(--gold-hi); background: linear-gradient(180deg, rgba(var(--rgb-sap-hi), 0.45), rgba(var(--rgb-navy), 0.5)); box-shadow: 0 0 0 1px rgba(233, 196, 106, 0.6), 0 0 18px rgba(var(--rgb-glow), 0.35); color: var(--cream); }
.mode.dis { opacity: 0.38; pointer-events: none; }
.summary { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 11px 14px; border-radius: 14px; background: rgba(var(--rgb-well), 0.55); border: 1px solid rgba(233, 196, 106, 0.35); color: var(--cream); font-size: 14px; margin-top: 14px; align-items: center; }
.summary span { display: inline-flex; align-items: center; gap: 5px; }
.summary b { color: var(--gold-hi); }
.summary img.ic { width: 20px; height: 20px; }

/* التقارير والرسائل */
.toolbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.rep-list { display: flex; flex-direction: column; gap: 4px; }
.rep-list .rep { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; cursor: pointer; background: rgba(var(--rgb-well), 0.32); border: 1px solid transparent; transition: .12s; }
.rep-list .rep:hover { background: rgba(var(--rgb-glow), 0.14); border-color: rgba(233, 196, 106, 0.35); }
.rep-list .rep.unread { font-weight: 800; background: linear-gradient(var(--ang90), rgba(233, 196, 106, 0.14), rgba(var(--rgb-well), 0.32)); border-color: rgba(233, 196, 106, 0.3); }
.rep-list .rep.unread::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px var(--gold); flex: none; }
.rep .ti { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep .when { margin-inline-start: auto; font-size: 12px; color: var(--muted2); white-space: nowrap; }
.battle { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.side { border-radius: 14px; padding: 11px 12px; border: 1px solid rgba(var(--rgb-hair), 0.2); background: var(--glass-2); min-width: 0; overflow-x: auto; }
.side.att { border-color: rgba(255, 106, 128, 0.45); box-shadow: inset 0 3px 0 rgba(224, 64, 90, 0.7); }
.side.def { border-color: rgba(var(--rgb-glow), 0.5); box-shadow: inset 0 3px 0 rgba(var(--rgb-glow), 0.8); }
.side h5 { margin: 0 0 8px; font-size: 14.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.side small { color: var(--muted); }
.troop-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; text-align: center; }
.troop-tbl img { width: 44px; height: 44px; }
.troop-tbl td { padding: 2px; }
.troop-tbl .lost { color: var(--bad); font-weight: 800; }
.troop-tbl .heal { color: var(--ok); }
.events-list { margin: 10px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.75; display: flex; flex-direction: column; gap: 4px; }
.events-list li { display: flex; gap: 8px; align-items: flex-start; padding: 5px 10px; border-radius: 10px; background: rgba(var(--rgb-well), 0.32); }
.events-list li img.ic { margin-top: 3px; }
.verdict { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; margin-bottom: 12px; border: 1px solid rgba(var(--rgb-hair), 0.2); background: var(--glass-2); flex-wrap: wrap; }
.verdict img.big { width: 54px; height: 54px; }
.verdict .vt { font-family: var(--title); font-size: 21px; }
.verdict.win { border-color: rgba(63, 211, 154, 0.5); background: linear-gradient(var(--ang90), rgba(13, 106, 74, 0.35), rgba(var(--rgb-deep), 0.4)); }
.verdict.win .vt { color: #b8ffe0; }
.verdict.lose { border-color: rgba(255, 90, 110, 0.5); background: linear-gradient(var(--ang90), rgba(122, 16, 40, 0.45), rgba(var(--rgb-deep), 0.4)); }
.verdict.lose .vt { color: #ffc4cc; }
.letter { white-space: pre-wrap; line-height: 1.9; padding: 14px 16px; border-radius: 14px; background: rgba(var(--rgb-well), 0.42); border: 1px solid rgba(233, 196, 106, 0.25); user-select: text; }

/* المهام والمتجر */
.quest { display: flex; gap: 12px; align-items: center; padding: 11px 13px; border-radius: 14px; border: 1px solid rgba(var(--rgb-hair), 0.18); background: var(--glass-2); margin-bottom: 8px; }
.quest.done { border-color: rgba(233, 196, 106, 0.6); background: linear-gradient(var(--ang90), rgba(233, 196, 106, 0.16), rgba(var(--rgb-navy), 0.4)); box-shadow: 0 0 16px rgba(233, 196, 106, 0.12); }
.quest.claimed { opacity: 0.55; }
.quest .qi { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 900; color: var(--gold-hi);
  background: radial-gradient(circle at 50% 35%, var(--gem-hi), var(--gem-lo) 72%); box-shadow: 0 0 0 2px rgba(233, 196, 106, 0.8), 0 3px 8px rgba(0, 0, 0, 0.5); }
.quest .qi img.ic { width: 34px; height: 34px; }
.quest .grow { flex: 1; min-width: 0; }
.quest h5 { margin: 0 0 2px; font-size: 15px; color: var(--ivory); }
.quest .lead { font-size: 13px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.shop-item { position: relative; padding: 16px 14px 14px; border-radius: 16px; background: var(--glass-2); border: 1px solid rgba(233, 196, 106, 0.3); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; overflow: hidden; }
.shop-item::before { content: ''; position: absolute; top: -40px; left: 50%; width: 160px; height: 120px; transform: translateX(-50%); background: radial-gradient(circle, rgba(164, 108, 245, 0.35), transparent 70%); pointer-events: none; }
.shop-item .big { position: relative; height: 70px; display: grid; place-items: center; }
.shop-item .big img.ic { width: 68px; height: 68px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)); }
.shop-item h5 { margin: 2px 0 0; font-size: 16px; color: var(--gold-hi); }
.shop-item p { font-size: 12.5px; color: var(--muted); min-height: 40px; margin: 0; flex: 1; }
.empty { text-align: center; color: var(--muted); padding: 26px 14px; font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty img.ic { width: 52px; height: 52px; opacity: .85; }
.row-flex { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
hr.sep { border: 0; height: 14px; margin: 10px 0; background: var(--orn-dia) center / 30px 14px no-repeat, var(--orn-line) center / 100% 14px no-repeat; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14px; margin: 8px 0; align-items: center; }
.kv dt { color: var(--muted); display: flex; align-items: center; gap: 6px; }
.kv dd { margin: 0; font-weight: 800; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lvl-badge { display: inline-grid; place-items: center; min-width: 32px; height: 32px; border-radius: 50%; padding: 0 5px; font-size: 15px; font-weight: 900; color: #2a1a04;
  background: radial-gradient(circle at 35% 30%, #fff3c0, #d4a64a 70%); border: 2px solid #5a3e10; box-shadow: 0 0 0 2px rgba(233, 196, 106, 0.35), 0 2px 6px rgba(0, 0, 0, 0.5); font-family: var(--font); }
.guide-steps { counter-reset: st; list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.guide-steps li { counter-increment: st; position: relative; padding: 10px 14px 10px 14px; padding-inline-start: 52px; border-radius: 14px; background: var(--glass-2); border: 1px solid rgba(var(--rgb-hair), 0.16); line-height: 1.85; font-size: 14.5px; }
.guide-steps li::before { content: counter(st); position: absolute; inset-inline-start: 12px; top: 10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #2a1a04; background: radial-gradient(circle at 35% 30%, #fff3c0, #d4a64a 70%); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.tips { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 12px; }
.tips span { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(var(--rgb-well), 0.42); border: 1px solid rgba(233, 196, 106, 0.28); font-size: 13.5px; }
.tips img.ic { width: 28px; height: 28px; }

/* الإعدادات */
.set-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 14px; background: var(--glass-2); border: 1px solid rgba(var(--rgb-hair), 0.16); margin-bottom: 8px; cursor: pointer; }
.set-row img.ic { width: 36px; height: 36px; }
.set-row .grow { flex: 1; }
.set-row h5 { margin: 0; font-size: 15px; }
.switch { position: relative; width: 50px; height: 28px; border-radius: 999px; background: rgba(var(--rgb-well), 0.6); border: 1px solid rgba(var(--rgb-hair), 0.3); transition: .18s; flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(180deg, var(--knob-1), var(--knob-2)); transition: .18s; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
.switch.on { background: linear-gradient(180deg, var(--tab-1), var(--tab-2)); border-color: var(--gold); }
.switch.on::after { inset-inline-start: 25px; background: linear-gradient(180deg, #fff3c0, #d4a64a); }

/* التنبيهات */
#toasts { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 7px; align-items: center; pointer-events: none; }
/* VIS4-06: تحت لافتة الفائزين المفتوحة (ui-season.js pushToasts) */
#toasts { translate: 0 var(--ban-push, 0px); }
.toast { display: flex; align-items: center; gap: 9px; padding: 8px 18px 8px 12px; padding-inline: 18px 12px; border-radius: 14px; font-weight: 800; font-size: 14px; animation: toastIn .28s cubic-bezier(.2, 1.4, .4, 1); pointer-events: auto; max-width: min(92vw, 560px); color: var(--ivory);
  background: var(--glass); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 22px rgba(var(--rgb-glow), 0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.toast img.ic { width: 28px; height: 28px; }
.toast.ok { border-color: rgba(63, 211, 154, 0.7); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 22px rgba(63, 211, 154, 0.25); }
.toast.err { border-color: rgba(255, 90, 110, 0.8); background: linear-gradient(180deg, rgba(110, 14, 38, 0.92), rgba(50, 6, 20, 0.94)); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 22px rgba(255, 74, 100, 0.3); }
.toast.info { color: var(--gold-hi); }
.toast.out { opacity: 0; transform: translateY(-8px); transition: opacity .35s, transform .35s; }
@keyframes toastIn { from { transform: translateY(-14px) scale(.96); opacity: 0; } }

/* شاشة التحميل */
#loading { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; color: var(--gold); font-family: var(--title); font-size: 26px; text-align: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(var(--rgb-glow), 0.25), transparent 60%), var(--tex-sky) 0 0 / var(--tex-sky-size), var(--night); }
#loading .crest { width: 76px; height: 76px; display: block; margin: 0 auto 10px; animation: float 3s ease-in-out infinite; filter: drop-shadow(0 0 18px rgba(233, 196, 106, 0.5)); }
#loading .spin { width: 54px; height: 54px; border: 3px solid rgba(233, 196, 106, 0.18); border-top-color: var(--gold); border-right-color: var(--sap-glow); border-radius: 50%; animation: spin 0.9s linear infinite; margin: 0 auto 14px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================ شاشات متوسطة */
@media (max-width: 1180px) {
  #top-bar { max-width: calc(100% - 560px); }
  #top-bar .chip.opt { display: none; }
}
@media (max-width: 900px) {
  .tribes { grid-template-columns: 1fr; }
  #top-bar { max-width: calc(100% - 210px); left: auto; right: 10px; transform: none; top: 10px; }
  #top-bar::before, #top-bar::after { display: none; }
  #top-bar .chip:not(.prot):not(.warn) { display: none; }
  #right-col { top: 66px; width: 206px; }
  #mini { height: 100px; }
  #chat { display: none; }
  #chat.open { display: flex; position: fixed; inset: auto 10px 100px 10px; z-index: 30; max-height: 52vh; }
  #chat.open .msgs, #chat.open .online-list { height: 34vh; }
  #chat-toggle { display: grid; }
  #events { width: 240px; bottom: 100px; max-height: 30%; }
  #res-panel { min-width: 150px; }
  .res .val { font-size: 14px; }
  .res .rate { display: none; }
  .act .circ { width: 48px; height: 48px; }
  .act .circ img.ic { width: 32px; height: 32px; }
  .act.main .circ { width: 58px; height: 58px; }
  .act.main .circ img.ic { width: 38px; height: 38px; }
  .act span { font-size: 10.5px; }
  #bottom-bar { gap: 7px; padding: 7px 10px 5px; width: max-content; max-width: calc(100% - 8px); overflow-x: auto; }
  #tile-panel { left: 8px; right: 8px; width: auto; top: auto; bottom: 100px; max-height: 46%; }
  .battle { grid-template-columns: 1fr; }
  .bld-hero { grid-template-columns: 1fr; gap: 6px; }
  .pedestal { height: 210px; }
  .pedestal .bimg { width: 190px; height: 190px; }
  .lvl-ring { inset-inline-start: calc(50% - 130px); }
  .unit-row { grid-template-columns: 64px 1fr; }
  .unit-row img.u { width: 64px; height: 64px; }
  .unit-row .train-ctl { grid-column: 1 / -1; }
}
/* ============================================================ الهواتف */
@media (max-width: 560px) {
  #top-bar { left: 6px; right: 6px; top: 6px; max-width: none; padding: 4px 9px; border-radius: 13px; gap: 6px; }
  #top-bar .vname { font-size: 17px; }
  #top-bar .vname img.ic { width: 22px; height: 22px; }
  /* الهاتف: الاسم نفسه يفتح قائمة القرى (القائمة شفافة فوقه) بدل نسخة مقصوصة منه بجانبه */
  #top-bar select { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; opacity: 0; z-index: 2; font-size: 16px; }
  #top-bar.multi .vdrop { display: inline-block; }
  #res-panel { top: 50px; left: 6px; right: 6px; padding: 4px; min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: 12px; }
  .res { padding: 1px 6px 4px 2px; gap: 4px; border-radius: 8px; }
  .res .sock { width: 22px; height: 22px; background: none; }
  .res img.ic { width: 22px; height: 22px; }
  .res .val { font-size: 13px; }
  .res .bar { left: 4px; right: 4px; bottom: 1px; height: 2px; }
  #right-col { top: 114px; width: 132px; right: 6px; max-height: calc(100% - 210px); }
  #mini { height: 66px; border-radius: 8px; }
  #mini-wrap { padding: 3px; border-radius: 11px; }
  #mini-wrap .coords { bottom: 6px; left: 7px; font-size: 10px; }
  #side-icons { position: fixed; top: 196px; right: 6px; grid-auto-flow: row; grid-template-rows: none; grid-template-columns: 40px; max-height: calc(100% - 420px); overflow-y: auto; overflow-x: hidden; padding: 1px 0 4px; gap: 5px; scrollbar-width: none; }
  #side-icons::-webkit-scrollbar { display: none; }
  #side-icons .ico-btn:not(.pri) { display: none; }
  #side-more { display: grid; }
  #side-icons.open { position: fixed; inset: 110px 10px auto 10px; max-height: calc(100% - 220px); display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: row; gap: 10px; padding: 16px 12px; z-index: 35; border-radius: 18px; overflow-y: auto;
    background: var(--glass); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  #side-icons.open .ico-btn { display: flex; flex-direction: column; width: auto; height: auto; padding: 8px 2px 6px; gap: 3px; border-radius: 14px; }
  #side-icons.open .ico-btn .lbl { display: block; font-size: 11px; font-weight: 800; color: var(--cream); white-space: nowrap; }
  #side-icons.open .ico-btn img.ic { width: 34px; height: 34px; }
  .ico-btn { width: 40px; height: 40px; border-radius: 12px; }
  .ico-btn img.ic { width: 27px; height: 27px; }
  #events { width: calc(100% - 64px); max-height: 19%; bottom: 88px; left: 6px; padding: 5px; gap: 3px; }
  .ev-h { font-size: 10.5px; padding: 1px 3px 0; }
  .ev { padding: 3px 7px 4px; font-size: 11.5px; }
  .ev .ic-w, .ev .ic-w img { width: 24px; height: 24px; }
  #zoom-ctl { bottom: auto; top: calc(100% - 228px); right: 6px; gap: 5px; }
  /* لوحة الدردشة المفتوحة تغطي مكان أزرار التكبير على الهاتف */
  #game:has(#chat.open) #zoom-ctl, #game:has(#chat.open) #events { display: none; }
  #zoom-ctl .ico-btn { width: 38px; height: 38px; }
  #bottom-bar { bottom: 6px; border-radius: 20px; padding: 6px 8px 4px; gap: 4px; }
  #bottom-bar::before { left: 20px; right: 20px; }
  .act .circ { width: 44px; height: 44px; border-width: 1.5px; }
  .act .circ img.ic { width: 30px; height: 30px; }
  .act.main .circ { width: 54px; height: 54px; }
  .act.main .circ img.ic { width: 36px; height: 36px; }
  #toasts { top: 112px; }
  .modal { width: calc(100% - 12px) !important; max-height: calc(100% - 16px); border-radius: 16px; }
  .modal-h { padding: 10px 12px 10px; gap: 9px; }
  .modal-h .medal { width: 40px; height: 40px; }
  .modal-h .medal img { width: 32px; height: 32px; }
  .modal-h h2 { font-size: 20px; }
  .modal-b { padding: 14px 12px 16px; }
  .modal-tabs { padding: 12px 8px 6px; gap: 4px; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .modal-tabs::-webkit-scrollbar { display: none; }
  /* الشريط أعرض من الشاشة: تلاشٍ على الطرفين يدل على وجود تبويبات أخرى */
  .modal-tabs.scrolls, .sub-tabs.scrolls { -webkit-mask-image: linear-gradient(var(--ang90), transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(var(--ang90), transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); scroll-padding-inline: 26px; }
  .modal-tabs button { padding: 6px 11px; font-size: 12.5px; flex: none; }
  .sec-tabs { margin: 16px -12px 0; padding: 8px 8px 6px; top: -14px; }
  .pedestal { height: 186px; }
  .pedestal .bimg { width: 168px; height: 168px; margin-bottom: 18px; }
  .pedestal .base { width: 176px; height: 48px; }
  .lvl-ring { inset-inline-start: 0; width: 66px; height: 66px; }
  .lvl-ring .in { width: 50px; height: 50px; }
  .stat-cards { grid-template-columns: 1fr 1fr; }
  .btn.xl { min-width: 0; font-size: 16px; }
  .bld-grid { grid-template-columns: 1fr; }
  .acts { grid-template-columns: 1fr 1fr; }
  .modes { grid-template-columns: 1fr 1fr; gap: 6px; }
  .mode { padding: 7px 9px; }
  .mode:not(.on) .md { display: none; }
  .mode.on { grid-column: 1 / -1; }
  .tbl { font-size: 12.5px; }
  .tbl th, .tbl td { padding: 6px 5px; }
  .kv { grid-template-columns: auto 1fr; gap: 5px 10px; font-size: 13px; }
  .logo .crest { width: 64px; height: 64px; }
  .auth-box { padding: 18px 16px; }
  .logo p { display: none; }
}
/* ============================================================ هواتف بالوضع الأفقي (ارتفاع قصير) */
@media (max-height: 500px) and (min-width: 561px) {
  #res-panel { top: 6px; left: 6px; padding: 4px; min-width: 0; width: 330px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: 12px; }
  .res { padding: 1px 6px 4px 2px; gap: 4px; border-radius: 8px; }
  .res .sock { width: 20px; height: 20px; background: none; }
  .res img.ic { width: 20px; height: 20px; }
  .res .val { font-size: 12.5px; }
  .res .rate { display: none; }
  .res .bar { left: 4px; right: 4px; bottom: 1px; height: 2px; }
  #top-bar { top: 6px; right: 6px; left: auto; transform: none; max-width: calc(100% - 350px); padding: 3px 9px; }
  #top-bar .vname { font-size: 16px; }
  #right-col { top: 50px; right: 6px; width: 150px; }
  #mini { height: 62px; }
  #mini-wrap { padding: 3px; }
  #side-icons { position: fixed; top: 50px; right: 164px; grid-auto-flow: column; grid-template-rows: repeat(2, 38px); grid-template-columns: none; gap: 5px; max-height: none; }
  .ico-btn { width: 38px; height: 38px; border-radius: 11px; }
  .ico-btn img.ic { width: 25px; height: 25px; }
  #events { bottom: 74px; left: 6px; width: 250px; max-height: calc(100% - 170px); padding: 5px; }
  .ev { padding: 3px 7px 4px; font-size: 11.5px; }
  .ev .ic-w, .ev .ic-w img { width: 24px; height: 24px; }
  #zoom-ctl { bottom: 78px; right: 6px; gap: 5px; }
  #zoom-ctl .ico-btn { width: 36px; height: 36px; }
  #bottom-bar { bottom: 4px; padding: 5px 10px 3px; gap: 6px; border-radius: 18px; }
  .act .circ { width: 40px; height: 40px; border-width: 1.5px; }
  .act .circ img.ic { width: 27px; height: 27px; }
  .act.main .circ { width: 48px; height: 48px; }
  .act.main .circ img.ic { width: 33px; height: 33px; }
  .act span { font-size: 10px; }
  #tile-panel { top: 50px; bottom: 70px; left: 6px; right: auto; width: 320px; max-height: none; }
  #toasts { top: 54px; }
  .modal { max-height: calc(100% - 10px); border-radius: 14px; }
  .modal-h { padding: 7px 14px 8px; }
  .modal-h .medal { width: 36px; height: 36px; }
  .modal-h .medal img { width: 28px; height: 28px; }
  .modal-h h2 { font-size: 19px; }
  .modal-tabs { padding: 10px 10px 4px; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
  .modal-b { padding: 12px 14px 14px; }
  .bld-hero { grid-template-columns: 200px 1fr; gap: 14px; }
  .pedestal { height: 176px; }
  .pedestal .bimg { width: 160px; height: 160px; margin-bottom: 16px; }
  .pedestal .base { width: 170px; height: 46px; }
  .lvl-ring { inset-inline-start: 0; width: 62px; height: 62px; }
  .lvl-ring .in { width: 48px; height: 48px; }
  #login { padding-top: 14px; }
  .tribes { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .tribe-card canvas { height: 90px; }
  .tribe-card p { display: none; }
}
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(233, 196, 106, 0.55), rgba(140, 100, 32, 0.55)); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: rgba(var(--rgb-well), 0.3); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ============================================================ fe_features (§7–§12): البطل، المجد والأوسمة، المهام، الضمّ، المتجر، المحادثات */
/* ---------- عناصر مشتركة */
.gbar { position: relative; height: 12px; border-radius: 999px; background: rgba(var(--rgb-well), 0.7); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(233, 196, 106, 0.28); overflow: hidden; margin: 5px 0 3px; }
.gbar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(var(--ang90), var(--btn-2), var(--btn-1) 70%, var(--tint)); box-shadow: 0 0 10px rgba(var(--rgb-glow), 0.55); transition: width .4s; }
.gbar > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10.5px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; letter-spacing: .3px; }
.gbar.gold > i { background: linear-gradient(var(--ang90), #8c6420, #e9c46a 60%, #fff0b8); box-shadow: 0 0 10px rgba(233, 196, 106, 0.6); }
.gbar.xp > i { background: linear-gradient(var(--ang90), #5a23a8, #a46cf5 60%, #e3ccff); box-shadow: 0 0 10px rgba(164, 108, 245, 0.6); }
.gbar.hp > i { background: linear-gradient(var(--ang90), #c0183a, #ff7a3a 30%, #e9c46a 55%, #3fd39a); background-size: 100vw 100%; box-shadow: 0 0 10px rgba(63, 211, 154, 0.45); }
.gbar.sap > i { background: linear-gradient(var(--ang90), var(--btn-3), var(--gem-hi2) 60%, var(--tint3)); }
.lvl-badge.sm { min-width: 24px; height: 24px; font-size: 12px; border-width: 1.5px; }
.chip.gold { border-color: rgba(233, 196, 106, 0.7); color: var(--gold-hi); background: rgba(90, 62, 16, 0.45); }
.chip.dim { opacity: .72; }
.chip b { color: var(--gold-hi); }
.chip.king { cursor: pointer; border-color: rgba(164, 108, 245, 0.6); color: #e3ccff; background: rgba(74, 31, 138, 0.45); }
.pc-none { font-size: 12.5px; color: var(--muted); padding: 8px 10px; border-radius: 10px; background: rgba(var(--rgb-well), 0.35); border: 1px dashed rgba(var(--rgb-hair), 0.2); }
.dq-note { font-size: 12.5px; line-height: 1.8; margin: 4px 0 10px; }
.dq-note img.ic { vertical-align: -3px; margin-inline-end: 4px; }
.sub-tabs { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; margin: -4px 0 14px; padding: 6px; border-radius: 14px; background: rgba(var(--rgb-well), 0.4); border: 1px solid rgba(var(--rgb-hair), 0.14); }
.sub-tabs button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--muted); font-weight: 800; font-size: 12.5px; cursor: pointer; transition: .12s; }
.sub-tabs button:hover { color: var(--ivory); background: rgba(var(--rgb-glow), 0.12); }
.sub-tabs button.on { color: var(--gold-hi); background: linear-gradient(180deg, rgba(233, 196, 106, 0.22), rgba(140, 100, 32, 0.18)); border-color: rgba(233, 196, 106, 0.6); box-shadow: 0 0 12px rgba(233, 196, 106, 0.15); }
.tbadge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-inline-start: 5px; padding: 0 5px; border-radius: 9px; font-style: normal; font-size: 11px; font-weight: 900; color: #04382a; background: linear-gradient(180deg, #8af0c4, #22a874); }
.callout { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: linear-gradient(var(--ang90), rgba(74, 31, 138, 0.35), rgba(var(--rgb-navy-lo), 0.4)); border: 1px solid rgba(164, 108, 245, 0.45); }
.callout b { color: #e3ccff; font-size: 14.5px; }
.callout .lead { font-size: 12.5px; margin: 0; }
.callout.merge { border-color: rgba(233, 196, 106, 0.75); background: linear-gradient(var(--ang90), rgba(140, 100, 32, 0.38), rgba(var(--rgb-navy), 0.45)); box-shadow: 0 0 22px rgba(233, 196, 106, 0.16); animation: glowPulse 2.4s ease-in-out infinite; }
.callout.merge b { color: var(--gold-hi); }
@keyframes glowPulse { 50% { box-shadow: 0 0 30px rgba(233, 196, 106, 0.32); } }
.cf-t ul { margin: 8px 0 0; }
.toast.medal { border-color: rgba(233, 196, 106, 0.9); background: linear-gradient(180deg, rgba(90, 62, 16, 0.95), rgba(26, 18, 4, 0.95)); color: var(--gold-hi); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 30px rgba(233, 196, 106, 0.4); }
.toast.medal img.ic { width: 40px; height: 40px; }

/* ---------- §7 وسام البطل في الواجهة */
#hero-btn { position: absolute; top: 10px; left: 206px; z-index: 5; width: 68px; height: 68px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 32%, var(--orb-1), var(--orb-2) 62%, var(--orb-3)); box-shadow: 0 0 0 2px #e9c46a, 0 0 0 4px rgba(var(--rgb-deep), 0.9), 0 0 0 5px rgba(233, 196, 106, 0.35), 0 8px 18px rgba(0, 0, 0, 0.6); transition: transform .14s, box-shadow .14s; }
#hero-btn:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 0 0 2px #fff0b8, 0 0 0 4px rgba(var(--rgb-deep), 0.9), 0 0 22px rgba(var(--rgb-glow), 0.6), 0 8px 18px rgba(0, 0, 0, 0.6); }
#hero-btn .hb-ring { position: absolute; inset: 0; transform: rotate(-90deg); pointer-events: none; }
#hero-btn .hb-ring svg { width: 100%; height: 100%; }
#hero-btn .hb-face { position: relative; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
#hero-btn .hb-lv { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); min-width: 24px; height: 22px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #2a1a04;
  background: radial-gradient(circle at 35% 30%, #fff3c0, #d4a64a 70%); border: 1.5px solid #5a3e10; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
#hero-btn .hb-st { position: absolute; top: -4px; right: -4px; width: 24px; height: 24px; padding: 2px; border-radius: 50%; background: var(--gem-lo); box-shadow: 0 0 0 1.5px #e9c46a; }
#hero-btn .hb-lock { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); }
#hero-btn .badge { top: -5px; inset-inline-end: -5px; }
#hero-btn.ghost .hb-face { filter: grayscale(1) brightness(0.8) contrast(1.1); opacity: .7; }
#hero-btn.dead .hb-face { filter: grayscale(1) brightness(0.6); }
#hero-btn.reviving { animation: heroRev 1.6s ease-in-out infinite; }
@keyframes heroRev { 50% { box-shadow: 0 0 0 2px #7fe3ff, 0 0 0 4px rgba(var(--rgb-deep), 0.9), 0 0 26px rgba(127, 227, 255, 0.7); } }
#hero-btn.below { width: 56px; height: 56px; }
#hero-btn.below .hb-face { width: 46px; height: 46px; }
#hero-btn.below .hb-lv { min-width: 20px; height: 18px; font-size: 11px; bottom: -6px; }
#game:has(#tile-panel:not(.hidden)) #hero-btn.below { display: none; }

/* ---------- §7 لوحة البطل */
.hero-m { --acc: #e9c46a; }
.hero-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; }
.hero-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 8px; }
.pedestal.hero-stage { height: 270px; }
.hero-stage .hface { position: relative; z-index: 2; width: 236px; height: 236px; object-fit: contain; margin-bottom: 26px; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.6)); transition: transform .3s; animation: heroIdle 4s ease-in-out infinite; }
@keyframes heroIdle { 50% { transform: translateY(-4px); } }
.hero-stage .lvl-ring.hl { top: 6px; inset-inline-start: 6px; }
.hero-stage .ribbon.green { background: linear-gradient(180deg, #8af0c4, #22a874); color: #03251a; border-color: #04382a; }
.hero-stage .ribbon.blue { background: linear-gradient(180deg, #a8c4ff, var(--gem-hi2)); color: #061436; border-color: var(--btn-b); }
.hero-stage .ribbon.red { background: linear-gradient(180deg, #ff8aa0, #d6334f); color: #fff; border-color: #4a0618; }
.hero-stage .ribbon.violet { background: linear-gradient(180deg, #d6b0ff, #9354ec); color: #fff; border-color: #2a0c5a; }
.hero-stage .ribbon img.ic { width: 16px; height: 16px; vertical-align: -3px; }
.hero-stage.dead .hface { filter: grayscale(1) brightness(0.55) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.7)); animation: none; }
.hero-stage.dead { --acc: #e0405a; }
.hero-stage.reviving .hface { filter: drop-shadow(0 0 16px rgba(127, 227, 255, 0.9)) saturate(0.6) brightness(1.15); opacity: .75; }
.hero-stage.reviving { --acc: #7fe3ff; }
.hero-stage.ghost .hface { filter: brightness(0) drop-shadow(0 0 2px rgba(127, 227, 255, 0.9)) drop-shadow(0 0 14px rgba(var(--rgb-glow), 0.7)); opacity: .65; animation: none; }
.hero-name { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 2px; }
.hero-name h3 { margin: 0; font-family: var(--title); font-size: 24px; color: var(--gold); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7), 0 0 18px rgba(233, 196, 106, 0.25); text-align: center; word-break: break-word; }
.hero-home { text-align: center; font-size: 12.5px; color: var(--muted); display: flex; gap: 5px; justify-content: center; align-items: center; flex-wrap: wrap; }
.hero-bars { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(var(--rgb-well), 0.42); border: 1px solid rgba(var(--rgb-hair), 0.16); }
.hb .hb-k { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--cream); }
.hb .hb-k b { margin-inline-start: auto; color: var(--gold-hi); }
.hb small { font-size: 11px; color: var(--muted); }
.hero-rec { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hero-rec span { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 4px 6px; border-radius: 12px; background: rgba(var(--rgb-well), 0.42); border: 1px solid rgba(var(--rgb-hair), 0.14); }
.hero-rec b { font-size: 15px; color: var(--ivory); }
.hero-rec small { font-size: 10.5px; color: var(--muted); }
.hero-main h4 .pill { font-family: var(--font); font-size: 12px; margin-inline-start: 4px; }
.pill.solid-g { background: linear-gradient(180deg, #8af0c4, #22a874); color: #03251a; border-color: #04382a; animation: glowPulseG 1.8s ease-in-out infinite; }
@keyframes glowPulseG { 50% { box-shadow: 0 0 14px rgba(63, 211, 154, 0.6); } }
.attr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.attr { position: relative; display: grid; grid-template-columns: 58px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--glass-2); border: 1px solid rgba(var(--rgb-hair), 0.18); transition: border-color .15s, box-shadow .15s; }
.attr.pend { border-color: rgba(63, 211, 154, 0.6); box-shadow: 0 0 16px rgba(63, 211, 154, 0.16); }
.attr-ic { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, var(--gem-hi), var(--gem-lo) 72%); box-shadow: 0 0 0 2px rgba(233, 196, 106, 0.75), 0 4px 10px rgba(0, 0, 0, 0.5); }
.attr-b { min-width: 0; }
.attr-h { display: flex; align-items: center; gap: 8px; }
.attr-h b { font-size: 15.5px; color: var(--ivory); }
.attr-n { margin-inline-start: auto; font-size: 20px; font-weight: 900; color: var(--gold-hi); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.attr.pend .attr-n { color: #b8ffe0; }
.attr-fx { font-size: 12.5px; font-weight: 800; color: var(--tint); margin-top: 1px; }
.attr-d { font-size: 11px; color: var(--muted); line-height: 1.5; }
.attr-ctl { display: flex; flex-direction: column; gap: 5px; }
.hero-st.away { border-color: rgba(var(--rgb-glow), 0.6); }
.hero-st.dead { border-color: rgba(255, 90, 110, 0.6); background: linear-gradient(180deg, rgba(122, 16, 40, 0.35), rgba(var(--rgb-deep), 0.5)); }
.hero-st.reviving { border-color: rgba(127, 227, 255, 0.6); background: linear-gradient(180deg, rgba(20, 90, 120, 0.3), rgba(var(--rgb-deep), 0.5)); }
.hero-st .gbar > i[data-pb] { width: 0; }
.hero-perks { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hero-perks li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; background: rgba(var(--rgb-well), 0.38); font-size: 13.5px; }
.hero-perks b { color: var(--gold-hi); }
.hero-mini { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--glass-2); border: 1px solid rgba(233, 196, 106, 0.38); flex-wrap: wrap; }
.hero-mini .hface { width: 96px; height: 96px; object-fit: contain; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(var(--rgb-glow), 0.5), rgba(var(--rgb-deep), 0.3) 70%); box-shadow: 0 0 0 2px rgba(233, 196, 106, 0.7), 0 0 0 4px rgba(var(--rgb-deep), 0.8); }
.hero-mini.dead .hface { filter: grayscale(1) brightness(0.6); }
.hero-mini .grow { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px; }
.hero-mini .hm-n { font-family: var(--title); font-size: 20px; color: var(--gold); }
.hm-act { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.hero-line { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 12px; border-radius: 14px; background: linear-gradient(var(--ang90), rgba(164, 108, 245, 0.2), rgba(var(--rgb-well), 0.4)); border: 1px solid rgba(164, 108, 245, 0.42); font-size: 13.5px; flex-wrap: wrap; }
.hero-line > img { width: 44px; height: 44px; object-fit: contain; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(164, 108, 245, 0.5), rgba(var(--rgb-deep), 0.3) 70%); box-shadow: 0 0 0 2px rgba(233, 196, 106, 0.6); }
.hero-line .grow { flex: 1; min-width: 160px; }
.hero-line small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.hero-line.dead > img { filter: grayscale(1); }
/* الإرسال: «مع البطل» */
.hero-pick { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 16px; cursor: pointer; background: var(--glass-2); border: 1px solid rgba(164, 108, 245, 0.35); transition: .15s; }
.hero-pick:hover { border-color: rgba(233, 196, 106, 0.6); }
.hero-pick.on { border-color: var(--gold-hi); background: linear-gradient(var(--ang90), rgba(164, 108, 245, 0.32), rgba(var(--rgb-navy), 0.5)); box-shadow: 0 0 0 1px rgba(233, 196, 106, 0.5), 0 0 22px rgba(164, 108, 245, 0.3); }
.hero-pick.dis { cursor: not-allowed; opacity: .72; }
.hero-pick.dis .switch { opacity: .4; }
.hero-pick .hp-face { width: 56px; height: 56px; object-fit: contain; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(164, 108, 245, 0.5), rgba(var(--rgb-deep), 0.3) 70%); box-shadow: 0 0 0 2px rgba(233, 196, 106, 0.6); flex: none; }
.hero-pick .grow { flex: 1; min-width: 0; }
.hp-t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 15px; }
.hp-s { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; font-weight: 800; color: var(--cream); margin-top: 2px; }
.hp-s span { display: inline-flex; align-items: center; gap: 3px; }
.hp-why { font-size: 12px; color: var(--bad); margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.hp-why.ok { color: var(--muted); }
/* التقارير */
.rep-hero { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 7px 10px; border-radius: 12px; background: linear-gradient(var(--ang90), rgba(164, 108, 245, 0.18), rgba(var(--rgb-well), 0.35)); border: 1px solid rgba(164, 108, 245, 0.35); }
.rep-hero.died { border-color: rgba(255, 90, 110, 0.5); background: linear-gradient(var(--ang90), rgba(122, 16, 40, 0.35), rgba(var(--rgb-well), 0.35)); }
.rep-hero .rh-face { width: 48px; height: 48px; flex: none; object-fit: contain; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(164, 108, 245, 0.45), rgba(var(--rgb-deep), 0.3) 70%); box-shadow: 0 0 0 2px rgba(233, 196, 106, 0.55); }
.rep-hero.died .rh-face { filter: grayscale(1); }
.rep-hero .grow { flex: 1; min-width: 0; }
.rh-hp { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.rh-hp .gbar { flex: 1; margin: 0; height: 10px; }
.rh-hp small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.medal-hero { display: flex; align-items: center; gap: 18px; padding: 14px 18px; margin-bottom: 12px; border-radius: 18px; background: radial-gradient(circle at 15% 50%, rgba(233, 196, 106, 0.28), transparent 60%), linear-gradient(var(--ang90), rgba(140, 100, 32, 0.35), rgba(var(--rgb-navy-lo), 0.4)); border: 1px solid rgba(233, 196, 106, 0.6); }
.medal-hero img.ic { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 16px rgba(233, 196, 106, 0.4)); }
.medal-hero .mh-k { font-size: 12.5px; color: var(--muted); font-weight: 800; }
.medal-hero .mh-t { font-family: var(--title); font-size: 24px; color: var(--gold-hi); margin: 2px 0 6px; }

/* ---------- §9 المهام */
.quests-m .quest.daily { border-color: rgba(233, 196, 106, 0.45); background: linear-gradient(var(--ang90), rgba(140, 100, 32, 0.25), rgba(var(--rgb-navy), 0.4)); }
.dq-info { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 2px; }
.dq-grid { display: flex; flex-direction: column; gap: 10px; }
.dq { position: relative; display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--glass-2); border: 1px solid rgba(var(--rgb-hair), 0.18); overflow: hidden; }
.dq::before { content: ''; position: absolute; inset: 0; inset-inline-start: auto; width: 3px; background: linear-gradient(180deg, var(--sap-glow), transparent); }
.dq.done { border-color: rgba(233, 196, 106, 0.75); background: linear-gradient(var(--ang90), rgba(233, 196, 106, 0.2), rgba(var(--rgb-navy), 0.42)); box-shadow: 0 0 22px rgba(233, 196, 106, 0.16); }
.dq.done::before { background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo)); }
.dq.wait-slot { border-style: dashed; opacity: .82; grid-template-columns: 64px 1fr; }
.dq-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, var(--gem-hi), var(--gem-lo) 72%); box-shadow: 0 0 0 2px rgba(233, 196, 106, 0.8), 0 0 0 4px rgba(var(--rgb-deep), 0.8), 0 4px 10px rgba(0, 0, 0, 0.5); }
.dq.done .dq-ic { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 0 4px rgba(var(--rgb-deep), 0.8), 0 0 18px rgba(233, 196, 106, 0.55); }
.dq.wait-slot .dq-ic img { animation: spin 6s linear infinite; }
.dq-b { min-width: 0; }
.dq-b h5 { margin: 0 0 1px; font-size: 16px; color: var(--ivory); }
.dq-b .lead { font-size: 13px; }
.dq-rw { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
.dq-rw .k { font-size: 12px; font-weight: 800; color: var(--gold); display: inline-flex; align-items: center; gap: 4px; }
.dq-rw .k small { color: var(--ok); }
.dq-wait { margin-top: 6px; font-size: 13px; color: var(--cream); display: flex; align-items: center; gap: 5px; }
.dq-wait b { color: var(--gold-hi); direction: ltr; }
.dq-act { display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 108px; }
.dq.done .dq-act .btn { animation: glowPulse 1.8s ease-in-out infinite; }
.cost.rw .cc.gem { color: #e3ccff; border-color: rgba(164, 108, 245, 0.5); }
.cost.rw .cc.gld { color: #ffd76a; }

/* ---------- §8 قاعة المجد */
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 10px; align-items: end; margin-bottom: 12px; }
.pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px 12px; border-radius: 18px; text-align: center; background: var(--glass-2); border: 1px solid rgba(var(--rgb-hair), 0.2); min-width: 0; }
.pod > img.ic:first-child { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6)); }
.pod.p1 { order: 2; padding-top: 26px; border-color: rgba(240, 207, 122, 0.85); background: radial-gradient(120% 80% at 50% 0%, rgba(233, 196, 106, 0.3), transparent 60%), var(--glass-2); box-shadow: 0 0 28px rgba(233, 196, 106, 0.2); }
.pod.p2 { order: 1; padding-top: 22px; border-color: rgba(200, 210, 230, 0.6); }
.pod.p3 { order: 3; padding-top: 22px; border-color: rgba(205, 127, 50, 0.6); }
.pod.me { box-shadow: 0 0 0 2px rgba(63, 211, 154, 0.7), 0 0 20px rgba(63, 211, 154, 0.25); }
.pod .pod-ic { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; margin-top: 18px; background: radial-gradient(circle at 50% 35%, var(--gem-hi), var(--gem-lo) 72%); box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px rgba(var(--rgb-deep), 0.8); }
.pod.p1 .pod-ic { width: 82px; height: 82px; }
.pod .who { justify-content: center; max-width: 100%; }
.pod .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-r { font-size: 11.5px; color: var(--muted); }
.pod-v { font-size: 17px; font-weight: 900; color: var(--gold-hi); display: flex; align-items: center; gap: 4px; justify-content: center; flex-wrap: wrap; }
.pod-v small { font-size: 11px; color: var(--muted); }
.rank-tbl .who b, .pl-tbl .who b { font-weight: 800; }
.pl-tbl .sub-l { font-size: 11px; color: var(--muted); margin-inline-start: 50px; margin-top: -2px; }
.pl-tbl .acts-c { white-space: nowrap; text-align: end; }
.pl-tbl .acts-c .btn { margin-inline-start: 3px; }
.rank-hero { display: flex; gap: 20px; align-items: center; padding: 16px 20px; border-radius: 20px; margin-bottom: 8px;
  background: radial-gradient(circle at 12% 50%, rgba(233, 196, 106, 0.25), transparent 55%), linear-gradient(var(--ang90), rgba(var(--rgb-sap), 0.5), rgba(var(--rgb-deep), 0.55)); border: 1px solid rgba(233, 196, 106, 0.55); }
.rank-hero .rh-ins { width: 132px; height: 132px; flex: none; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 35%, var(--gem-hi2), var(--gem-lo2) 72%);
  box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px rgba(var(--rgb-deep), 0.9), 0 0 0 7px rgba(233, 196, 106, 0.4), 0 0 36px rgba(233, 196, 106, 0.3); }
.rank-hero .rh-k { font-size: 12.5px; color: var(--muted); font-weight: 800; }
.rank-hero .rh-t { font-family: var(--title); font-size: 34px; color: var(--gold-hi); line-height: 1.2; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.6), 0 0 22px rgba(233, 196, 106, 0.3); }
.rank-hero .rh-g { font-size: 15px; color: var(--cream); display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.rank-hero .rh-g b { color: var(--gold-hi); font-size: 19px; }
.rank-hero .gbar { height: 16px; max-width: 520px; }
.ladder { position: relative; display: flex; flex-direction: column; gap: 7px; padding-inline-start: 18px; }
.ladder::before { content: ''; position: absolute; top: 20px; bottom: 20px; inset-inline-start: 50px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, rgba(233, 196, 106, 0.15), rgba(233, 196, 106, 0.7)); }
.rung { position: relative; display: grid; grid-template-columns: 72px 1fr 120px 34px; gap: 12px; align-items: center; padding: 8px 14px 8px 10px; padding-inline: 14px 10px; border-radius: 16px; background: var(--glass-2); border: 1px solid rgba(var(--rgb-hair), 0.16); }
.rung .rg-ins { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 35%, var(--gem-hi), var(--gem-lo) 72%); box-shadow: 0 0 0 2px rgba(233, 196, 106, 0.6), 0 0 0 4px rgba(var(--rgb-deep), 0.9); z-index: 1; }
.rung .rg-t { font-family: var(--title); font-size: 19px; color: var(--ivory); display: flex; align-items: center; gap: 8px; }
.rung .rg-req { font-size: 12.5px; color: var(--muted); }
.rung .rg-n { text-align: center; }
.rung .rg-n b { font-size: 16px; color: var(--ivory); }
.rung .rg-n small { font-size: 11px; color: var(--muted); margin-inline-start: 3px; }
.rung .rg-n .gbar { height: 6px; margin: 3px 0 0; }
.rung.got { border-color: rgba(63, 211, 154, 0.35); }
.rung.got .rg-s img { filter: drop-shadow(0 0 6px rgba(63, 211, 154, 0.8)); }
.rung.cur { border-color: var(--gold-hi); background: linear-gradient(var(--ang90), rgba(233, 196, 106, 0.22), rgba(var(--rgb-sap), 0.4)); box-shadow: 0 0 0 1px rgba(233, 196, 106, 0.5), 0 0 26px rgba(233, 196, 106, 0.22); }
.rung.cur .rg-ins { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 0 4px rgba(var(--rgb-deep), 0.9), 0 0 22px rgba(233, 196, 106, 0.6); }
.rung.cur .rg-t { color: var(--gold-hi); }
.rung.lock { opacity: .62; }
.rung.lock .rg-ins img { filter: grayscale(0.7) brightness(0.8); }
.period-card { display: flex; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 16px; margin-bottom: 12px; background: linear-gradient(var(--ang90), rgba(var(--rgb-sap), 0.45), rgba(var(--rgb-deep), 0.5)); border: 1px solid rgba(233, 196, 106, 0.45); }
.period-card .pc-t { font-size: 16px; font-weight: 800; color: var(--ivory); }
.period-card .pc-t b { color: var(--gold-hi); direction: ltr; }
.period-card .lead { font-size: 12.5px; line-height: 1.9; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.cat { padding: 10px 12px; border-radius: 16px; background: var(--glass-2); border: 1px solid rgba(var(--rgb-hair), 0.18); }
.cat-h { display: flex; align-items: center; gap: 9px; padding-bottom: 7px; margin-bottom: 7px; border-bottom: 1px solid rgba(233, 196, 106, 0.2); }
.cat-h b { display: block; font-size: 15px; color: var(--gold); }
.cat-h small { font-size: 11px; color: var(--muted); }
.cat-me { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.cat-me small { font-size: 10.5px; color: var(--muted); }
.cat-me b { font-size: 15px; color: var(--ivory); }
.cat-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.cat-top li { display: flex; align-items: center; gap: 7px; padding: 3px 8px; border-radius: 9px; font-size: 13px; background: rgba(var(--rgb-well), 0.35); }
.cat-top li.me { background: rgba(233, 196, 106, 0.18); font-weight: 800; }
.cat-top .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-top b { color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.med-sum { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 14px; }
.med-sum .ms { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 16px; background: var(--glass-2); border: 1px solid rgba(var(--rgb-hair), 0.16); }
.med-sum .ms b { font-size: 22px; color: var(--ivory); }
.med-sum .ms small { font-size: 11px; color: var(--muted); text-align: center; }
.med-sum .ms.gold { border-color: rgba(240, 207, 122, 0.6); }
.medal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mcard { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding: 12px 8px 10px; border-radius: 16px; background: var(--glass-2); border: 1px solid rgba(var(--rgb-hair), 0.18); }
.mcard img.ic { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6)); }
.mcard b { font-size: 12.5px; color: var(--ivory); line-height: 1.45; }
.mcard small { font-size: 11px; color: var(--muted); }
.mcard small.dim { opacity: .75; }
.mcard.gold { border-color: rgba(240, 207, 122, 0.7); background: radial-gradient(circle at 50% 20%, rgba(233, 196, 106, 0.25), transparent 60%), var(--glass-2); }
.mcard.silver { border-color: rgba(200, 210, 230, 0.55); }
.mcard.bronze { border-color: rgba(205, 127, 50, 0.55); }
.mcard.ach { border-color: rgba(164, 108, 245, 0.5); }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.achv { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 12px 10px; border-radius: 16px; background: var(--glass-2); border: 1px solid rgba(var(--rgb-hair), 0.16); }
.achv .lead { font-size: 12px; line-height: 1.55; flex: 1; }
.achv .gbar { width: 100%; }
.achv .av-ic { position: relative; }
.achv:not(.got) .av-ic > img.ic:first-child { filter: grayscale(1) brightness(0.55); }
.achv .av-lock, .achv .av-ok { position: absolute; bottom: -2px; inset-inline-end: -4px; }
.achv.got { border-color: rgba(233, 196, 106, 0.7); background: radial-gradient(circle at 50% 18%, rgba(233, 196, 106, 0.25), transparent 60%), var(--glass-2); box-shadow: 0 0 18px rgba(233, 196, 106, 0.12); }
.achv b { font-size: 14px; color: var(--gold-hi); }
.pl-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.search { position: relative; display: inline-flex; align-items: center; flex: 1; min-width: 200px; }
.search img.ic { position: absolute; inset-inline-start: 10px; pointer-events: none; opacity: .85; }
.search .inp { width: 100%; padding-inline-start: 36px; }
.pager { display: flex; gap: 4px; justify-content: center; align-items: center; margin-top: 12px; flex-wrap: wrap; }
/* الملف الشخصي */
.modal.profile-m { width: min(760px, calc(100% - 20px)); }
.prof-head { display: flex; gap: 18px; align-items: center; padding: 14px 16px; border-radius: 18px; background: radial-gradient(circle at 10% 50%, color-mix(in srgb, var(--tc) 30%, transparent), transparent 60%), linear-gradient(var(--ang90), rgba(var(--rgb-sap), 0.45), rgba(var(--rgb-deep), 0.5)); border: 1px solid rgba(233, 196, 106, 0.45); }
.prof-head .ph-ins { width: 112px; height: 112px; flex: none; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 35%, var(--gem-hi2), var(--gem-lo2) 72%); box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px rgba(var(--rgb-deep), 0.9), 0 0 28px rgba(233, 196, 106, 0.3); }
.prof-head .ph-n { font-family: var(--title); font-size: 30px; line-height: 1.2; color: var(--tc); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7); word-break: break-word; }
.prof-head .ph-r { font-size: 14px; color: var(--cream); }
.prof-head .ph-r b { color: var(--gold-hi); }
.prof-head .gbar { height: 8px; max-width: 420px; }
.med-chips { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.med-chips span { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; color: var(--gold-hi); font-size: 15px; }
.medal-strip { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-radius: 14px; background: rgba(var(--rgb-well), 0.4); border: 1px solid rgba(233, 196, 106, 0.22); }
.medal-strip .mi { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; transition: transform .12s; cursor: help; }
.medal-strip .mi:hover { transform: scale(1.12); background: rgba(233, 196, 106, 0.12); }
.medal-strip img.ic { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)); }

/* ---------- §10 الضمّ */
.king-note { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 12px; border-radius: 14px; background: linear-gradient(var(--ang90), rgba(74, 31, 138, 0.38), rgba(var(--rgb-navy-lo), 0.4)); border: 1px solid rgba(164, 108, 245, 0.5); }
.king-note b { color: #e3ccff; font-size: 14.5px; }
.king-note .lead { font-size: 12.5px; margin: 1px 0 0; }
.king-card { padding: 14px 16px; border-radius: 18px; background: radial-gradient(circle at 10% 20%, rgba(164, 108, 245, 0.25), transparent 55%), linear-gradient(180deg, rgba(var(--rgb-sap), 0.4), rgba(var(--rgb-deep), 0.5)); border: 1px solid rgba(164, 108, 245, 0.5); }
.kc-h { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.kc-k { font-size: 12px; color: var(--muted); font-weight: 800; }
.kc-t { font-family: var(--title); font-size: 24px; color: var(--gold-hi); margin-bottom: 4px; }
.kc-tiles { display: flex; flex-direction: column; gap: 6px; }
.kc-tile { display: flex; align-items: center; gap: 10px; padding: 7px 11px; border-radius: 12px; background: rgba(var(--rgb-well), 0.42); border: 1px solid rgba(var(--rgb-hair), 0.16); flex-wrap: wrap; }
.kc-tile.cur { border-color: rgba(233, 196, 106, 0.6); background: rgba(233, 196, 106, 0.1); }
.kc-tile .grow { flex: 1; min-width: 160px; }
.kc-tile small { display: block; color: var(--muted); font-size: 11.5px; }
.king-rules { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.king-rules li { display: flex; gap: 8px; align-items: flex-start; padding: 7px 10px; border-radius: 12px; background: rgba(var(--rgb-well), 0.35); font-size: 12.5px; line-height: 1.65; }
.king-rules b { color: var(--gold-hi); }
.merge-card.ready { border-color: var(--gold-hi); box-shadow: 0 0 24px rgba(233, 196, 106, 0.18); }
.why-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.why-list li { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: #ffc4cc; }
.why-list li img.ic { margin-top: 3px; }
.why-list.sm li { font-size: 12px; }
.why-list.ok li { color: var(--cream); font-size: 14px; }
.why-list.ok li.bad { color: #ffb4bf; }
.why-list.ok li.bad b { color: #ff8a98; }
.merge-t.ok { border-color: rgba(233, 196, 106, 0.55); background: linear-gradient(var(--ang90), rgba(233, 196, 106, 0.12), rgba(var(--rgb-well), 0.42)); }
details.how { margin-top: 14px; border-radius: 14px; background: rgba(var(--rgb-well), 0.38); border: 1px solid rgba(var(--rgb-hair), 0.16); padding: 2px 12px; }
details.how summary { cursor: pointer; padding: 8px 0; font-weight: 800; color: var(--gold); display: flex; align-items: center; gap: 6px; list-style: none; }
details.how summary::-webkit-details-marker { display: none; }
details.how p { font-size: 13px; color: var(--cream); line-height: 1.9; margin: 0 0 10px; }

/* ---------- §11 المتجر بالدولار */
.treasury { position: relative; display: flex; gap: 18px; align-items: center; padding: 16px 20px; border-radius: 20px; margin-bottom: 6px;
  background: radial-gradient(circle at 90% 0%, rgba(164, 108, 245, 0.35), transparent 50%), radial-gradient(circle at 0% 100%, rgba(233, 196, 106, 0.22), transparent 50%), linear-gradient(180deg, rgba(var(--rgb-sap), 0.5), rgba(var(--rgb-deep), 0.6)); border: 1px solid rgba(233, 196, 106, 0.6); }
.treasury.demo { border-color: rgba(164, 108, 245, 0.7); }
.tr-bal { display: flex; gap: 10px; flex: none; }
.tr-bal span { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 92px; padding: 8px 10px; border-radius: 16px; background: rgba(var(--rgb-well), 0.5); border: 1px solid rgba(233, 196, 106, 0.3); }
.tr-bal b { font-size: 20px; color: var(--ivory); font-variant-numeric: tabular-nums; }
.tr-bal small { font-size: 11px; color: var(--muted); }
.tr-txt { flex: 1; min-width: 0; }
.tr-txt > b { font-family: var(--title); font-size: 21px; color: var(--gold-hi); display: flex; gap: 6px; align-items: center; }
.tr-txt .lead { font-size: 13px; }
.pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
.pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px 14px; border-radius: 20px; cursor: pointer; text-align: center; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, rgba(164, 108, 245, 0.32), transparent 62%), var(--glass-2); border: 1px solid rgba(164, 108, 245, 0.45); transition: transform .14s, box-shadow .14s, border-color .14s; }
.pack.gold { background: radial-gradient(circle at 50% 30%, rgba(233, 196, 106, 0.3), transparent 62%), var(--glass-2); border-color: rgba(233, 196, 106, 0.45); }
.pack:hover { transform: translateY(-3px); border-color: var(--gold-hi); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 26px rgba(164, 108, 245, 0.3); }
.pack.gold:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 26px rgba(233, 196, 106, 0.3); }
.pack.tagged { border-color: var(--gold-hi); box-shadow: 0 0 0 1px rgba(233, 196, 106, 0.55), 0 0 24px rgba(233, 196, 106, 0.2); }
.pack::after { content: ''; position: absolute; inset: -40% -60%; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.12) 50%, transparent 58%); transform: translateX(-60%); transition: transform .6s; pointer-events: none; }
.pack:hover::after { transform: translateX(60%); }
.pk-tag { position: absolute; top: 10px; inset-inline-start: -34px; transform: rotate(calc(35deg * var(--fx))); padding: 3px 38px; font-size: 11px; font-weight: 900; color: #2a1a04; background: linear-gradient(180deg, #fff0b0, #e3b44e); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); white-space: nowrap; }
.pk-tag img.ic { width: 12px; height: 12px; vertical-align: -1px; }
.pk-bonus { position: absolute; top: 10px; inset-inline-end: 10px; display: flex; flex-direction: column; align-items: center; line-height: 1.1; padding: 4px 8px; border-radius: 12px; font-size: 14px; font-weight: 900; color: #03251a; background: linear-gradient(180deg, #8af0c4, #22a874); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }
.pk-bonus small { font-size: 9.5px; }
.pk-ic { height: 112px; display: grid; place-items: center; }
.pk-ic img.ic { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6)); transition: transform .2s; }
.pack:hover .pk-ic img.ic { transform: scale(1.06) rotate(-2deg); }
.pk-amt { display: flex; align-items: center; gap: 6px; }
.pk-amt b { font-size: 26px; font-weight: 900; color: var(--ivory); letter-spacing: .5px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.pk-name { font-size: 13px; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.pk-buy { width: 100%; font-size: 17px; min-height: 42px; }
.pk-price { font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.buy-box { display: flex; align-items: center; gap: 16px; justify-content: center; padding: 10px 6px; }
.buy-box img.ic { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6)); }
.bb-amt { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.bb-amt b { font-size: 30px; color: var(--ivory); }
.bb-name { font-size: 14px; color: var(--muted); margin: 2px 0 6px; }
.bb-price { font-size: 28px; font-weight: 900; color: var(--gold-hi); }
.pay-go, .pay-ok { position: relative; text-align: center; padding: 14px 6px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pay-go .spin { width: 64px; height: 64px; border: 4px solid rgba(233, 196, 106, 0.18); border-top-color: var(--gold); border-right-color: var(--sap-glow); border-radius: 50%; animation: spin 0.9s linear infinite; margin: 6px auto 8px; }
.pay-go h3, .pay-ok h3 { margin: 4px 0; font-family: var(--title); font-size: 24px; color: var(--gold-hi); display: flex; gap: 8px; align-items: center; justify-content: center; }
.pay-ok img.ic { position: relative; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 22px rgba(233, 196, 106, 0.5)); animation: float 3s ease-in-out infinite; }
.po-rays { position: absolute; top: -10px; left: 50%; width: 280px; height: 280px; transform: translateX(-50%); border-radius: 50%; opacity: .5; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 240, 184, 0.35) 0 5deg, transparent 5deg 20deg); -webkit-mask: radial-gradient(circle, #000 15%, transparent 66%); mask: radial-gradient(circle, #000 15%, transparent 66%); animation: spin 40s linear infinite; }
.ph-list { display: flex; flex-direction: column; gap: 7px; }
.ph { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--glass-2); border: 1px solid rgba(var(--rgb-hair), 0.16); flex-wrap: wrap; }
.ph .grow { flex: 1; min-width: 180px; }
.ph small { display: block; color: var(--muted); font-size: 11.5px; }
.ph-price { font-size: 16px; color: var(--gold-hi); }
.ph.paid { border-color: rgba(63, 211, 154, 0.35); }
.ph.pending { border-color: rgba(var(--rgb-glow), 0.5); }

/* ---------- v6 — payments: ملخص الطلب وطرق الدفع، الدفع بالتحويل ورفع الإيصال PDF، مشترياتي بحالاتها (theme tokens only) */
.btn.tiny { padding: 2px 8px; min-height: 24px; font-size: 11.5px; border-radius: 8px; gap: 4px; }
.btn.tiny img.ic { width: 14px; height: 14px; }
.pay-ways { flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pay-note { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 10px 0 4px; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(var(--ang90), rgba(var(--rgb-glow), 0.16), rgba(var(--rgb-well), 0.42)); border: 1px solid rgba(var(--rgb-glow), 0.45); }
.pay-note .grow { flex: 1 1 260px; min-width: 0; }
.pay-note b { color: var(--gold-hi); font-size: 15px; }
.pay-note .lead { font-size: 12.5px; }
.pay-note.review { background: linear-gradient(var(--ang90), rgba(233, 196, 106, 0.16), rgba(var(--rgb-well), 0.42)); border: 1px dashed rgba(233, 196, 106, 0.6); }
.pay-steps { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: ps; }
.pay-steps li { counter-increment: ps; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; padding-inline: 10px 4px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: var(--cream); background: rgba(var(--rgb-well), 0.5); border: 1px solid rgba(var(--rgb-hair), 0.2); }
.pay-steps li::before { content: counter(ps); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 900; color: var(--gold-deep);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-mid)); }
.pk-review { margin: -2px 0 4px; }
.pack.in-review { border-style: dashed; }
.pay-foot { font-size: 12px; margin-top: 12px; text-align: center; }
.pay-foot img.ic { vertical-align: -2px; }
/* ملخص الطلب */
.buy-m .modal-b { padding-bottom: 14px; }
.os-lines { margin: 6px 0 12px; padding: 4px 14px; border-radius: 14px; background: rgba(var(--rgb-well), 0.45); border: 1px solid rgba(var(--rgb-hair), 0.16); }
.os-lines > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed rgba(var(--rgb-hair), 0.16); font-size: 13.5px; }
.os-lines > div:last-child { border-bottom: 0; }
.os-lines span { color: var(--muted); }
.os-lines b { display: inline-flex; align-items: center; gap: 5px; color: var(--ivory); min-width: 0; overflow-wrap: anywhere; text-align: end; }
.os-total { padding-top: 10px !important; }
.os-total span { color: var(--cream); font-weight: 800; }
.os-total b { font-size: 21px; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.pm-title { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; font-family: var(--title); font-size: 18px; color: var(--gold-hi); }
.pay-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.pm-opt { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: var(--glass-2); border: 1px solid rgba(233, 196, 106, 0.4); }
.pm-opt.pm-transfer { border-color: rgba(var(--rgb-glow), 0.5); }
.pm-opt.pm-off { border-style: dashed; border-color: rgba(var(--rgb-hair), 0.25); }
.pm-opt.pm-off .pm-h { opacity: .78; }
.pm-h { display: flex; align-items: center; gap: 10px; }
.pm-h > div { min-width: 0; }
.pm-h b { display: block; font-size: 15px; color: var(--ivory); }
.pm-h small { display: block; font-size: 11.5px; line-height: 1.6; color: var(--muted); }
.pm-opt .btn.big { font-size: 15.5px; min-height: 44px; }
.pm-why { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 12px; line-height: 1.7; color: var(--tint2); }
.pm-why img.ic { flex: none; margin-top: 2px; }
/* الدفع بالتحويل */
.mt-steps { display: flex; gap: 0; margin: 0 0 12px; padding: 0; list-style: none; counter-reset: mt; }
.mt-steps li { counter-increment: mt; flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; }
.mt-steps li::before { content: counter(mt); position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; font-weight: 900;
  color: var(--muted); background: rgba(var(--rgb-well), 0.7); border: 2px solid rgba(var(--rgb-hair), 0.3); }
.mt-steps li + li::after { content: ''; position: absolute; top: 13px; inset-inline-end: 50%; width: 100%; height: 2px; background: rgba(var(--rgb-hair), 0.22); }
.mt-steps li.on { color: var(--gold-hi); }
.mt-steps li.on::before { color: var(--gold-deep); background: linear-gradient(180deg, var(--gold-hi), var(--gold-mid)); border-color: var(--gold); }
.mt-steps li.on + li.on::after { background: var(--gold); }
.mt-amount { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: radial-gradient(circle at 10% 50%, rgba(233, 196, 106, 0.2), transparent 60%), rgba(var(--rgb-well), 0.45);
  border: 1px solid rgba(233, 196, 106, 0.5); }
.mt-amount .grow { flex: 1; min-width: 0; }
.mt-amount small { display: block; font-size: 12px; color: var(--muted); line-height: 1.6; }
.mt-amount b { font-size: 26px; font-weight: 900; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.mt-instr { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.9; color: var(--cream); white-space: pre-line; overflow-wrap: anywhere;
  background: rgba(var(--rgb-glow), 0.08); border-inline-start: 3px solid var(--gold); }
.mt-acct { margin-top: 10px; padding: 2px 12px; border-radius: 14px; background: rgba(var(--rgb-well), 0.45); border: 1px solid rgba(var(--rgb-hair), 0.16); }
.mt-row { display: grid; grid-template-columns: minmax(90px, auto) 1fr auto; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed rgba(var(--rgb-hair), 0.14); font-size: 13px; }
.mt-acct .mt-row:last-child { border-bottom: 0; }
.mt-row span { color: var(--muted); }
.mt-row b { color: var(--ivory); font-weight: 800; overflow-wrap: anywhere; letter-spacing: .3px; }
.mt-m .pm-title { margin-top: 16px; }
.mt-ref { margin-top: 10px; padding: 8px 12px; border-radius: 14px; border: 1px dashed rgba(233, 196, 106, 0.55); background: rgba(233, 196, 106, 0.07); }
.mt-ref b { color: var(--gold-hi); }
.rc-drop { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; cursor: pointer; transition: border-color .14s, background .14s;
  background: rgba(var(--rgb-well), 0.4); border: 2px dashed rgba(var(--rgb-hair), 0.35); }
.rc-drop:hover, .rc-drop.over { border-color: var(--gold); background: rgba(var(--rgb-glow), 0.12); }
.rc-drop.ok { border-style: solid; border-color: rgba(63, 211, 154, 0.7); background: rgba(63, 211, 154, 0.08); }
.rc-drop.bad { border-color: rgba(224, 64, 90, 0.75); background: rgba(224, 64, 90, 0.08); }
.rc-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.rc-drop:focus-within { box-shadow: 0 0 0 3px rgba(var(--rgb-glow), 0.45); }
.rc-ic { flex: none; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 16px; background: radial-gradient(circle at 50% 35%, rgba(var(--rgb-glow), 0.35), rgba(var(--rgb-deep), 0.3) 72%); }
.rc-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rc-txt b { color: var(--ivory); font-size: 14.5px; overflow-wrap: anywhere; }
.rc-txt small { color: var(--muted); font-size: 12px; line-height: 1.6; }
.rc-bar { height: 8px; margin: 10px 0 0; border-radius: 8px; overflow: hidden; background: rgba(var(--rgb-well), 0.7); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); }
.rc-bar > b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(var(--ang90), var(--gold-mid), var(--gold-hi)); transition: width .15s; }
.rc-err { margin: 8px 0 0; padding: 7px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 700; color: var(--bad); background: rgba(224, 64, 90, 0.1); border: 1px solid rgba(224, 64, 90, 0.4); }
.mt-acts { margin-top: 12px; align-items: center; flex-wrap: wrap; gap: 8px; }
.mt-acts .btn.big { width: auto; min-width: 200px; }
.mt-acts small { font-size: 12px; }
.rc-ok { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 6px 4px; text-align: center; }
.rc-ok > img.ic { position: relative; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 20px rgba(63, 211, 154, 0.45)); }
.rc-ok h3 { margin: 2px 0; font-family: var(--title); font-size: 25px; color: var(--gold-hi); }
.rc-ok .lead { max-width: 440px; }
.rc-ok .lead.small { font-size: 12px; }
.rc-ok .row-flex { flex-wrap: wrap; gap: 8px; }
.rc-ok .btn.big { width: auto; min-width: 190px; }
/* مشترياتي */
.ph-sum { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ph-note { display: flex !important; align-items: center; gap: 4px; margin-top: 3px; font-weight: 700; color: var(--tint2) !important; }
.ph-note.bad { color: var(--bad) !important; }
.ph-note img.ic { flex: none; }
.ph.review { border-color: rgba(233, 196, 106, 0.55); border-style: dashed; }
.ph.failed { border-color: rgba(224, 64, 90, 0.4); }
.ph.refunded { border-color: rgba(164, 108, 245, 0.45); }
.ph.cancelled { opacity: .82; }
.ph-empty { padding: 18px 0; }
@media (max-width: 560px) {
  .pay-methods { grid-template-columns: 1fr; }
  .pay-note { padding: 10px 12px; }
  .pay-note > img.ic { width: 28px; height: 28px; }
  .os-lines { padding: 2px 10px; }
  .os-total b { font-size: 19px; }
  .mt-amount { padding: 8px 10px; gap: 8px; }
  .mt-amount > img.ic { width: 46px; height: 46px; }
  .mt-amount b { font-size: 22px; }
  .mt-row { grid-template-columns: 1fr auto; gap: 2px 8px; }
  .mt-row span { grid-column: 1 / -1; font-size: 11.5px; }
  .mt-row > i { display: none; }
  .rc-drop { padding: 12px; gap: 10px; }
  .rc-ic { width: 48px; height: 48px; }
  .rc-ic img.ic { width: 36px; height: 36px; }
  .mt-acts .btn.big { width: 100%; min-width: 0; }
  .mt-acts .grow { display: none; }
  .mt-steps li { font-size: 11px; }
  .ph .grow { min-width: 140px; }
}

/* ---------- §12 المحادثات */
.modal.convs-m { height: min(780px, calc(100% - 28px)); }
.convs-m .modal-b { padding: 0; display: flex; overflow: hidden; }
.cv-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: 330px 1fr; }
.cv-list { display: flex; flex-direction: column; min-height: 0; border-inline-end: 1px solid rgba(233, 196, 106, 0.22); background: rgba(var(--rgb-well), 0.28); }
.cv-tools { display: flex; gap: 6px; padding: 14px 12px 10px; align-items: center; border-bottom: 1px solid rgba(var(--rgb-hair), 0.12); }
.cv-tools .search { min-width: 0; }
.cv-items { flex: 1; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.cv-it { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; cursor: pointer; border: 1px solid transparent; transition: background .12s, border-color .12s; }
.cv-it:hover { background: rgba(var(--rgb-glow), 0.12); }
.cv-it.on { background: linear-gradient(var(--ang90), rgba(var(--rgb-sap-hi), 0.42), rgba(var(--rgb-navy), 0.4)); border-color: rgba(233, 196, 106, 0.55); }
.cv-it.unread .cv-r1 b, .cv-it.unread .cv-last { color: var(--ivory); font-weight: 900; }
.cv-it.system .cv-r1 b { color: var(--gold-hi); }
.cv-av { position: relative; flex: none; display: grid; place-items: center; border-radius: 50%; font-family: var(--title); font-size: 21px; font-weight: 700; color: #fff; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tc, var(--sap-glow)) 85%, #fff), color-mix(in srgb, var(--tc, var(--sap-glow)) 70%, var(--night)) 75%); box-shadow: 0 0 0 2px rgba(233, 196, 106, 0.75), 0 3px 8px rgba(0, 0, 0, 0.5); }
.cv-av.sys { background: radial-gradient(circle at 50% 35%, #6a2c91, #2a0c48 75%); }
.cv-av i.on { position: absolute; bottom: 0; inset-inline-end: 0; width: 12px; height: 12px; border-radius: 50%; background: #3fd39a; box-shadow: 0 0 0 2px var(--modal-2), 0 0 6px rgba(63, 211, 154, 0.9); }
.cv-tx { flex: 1; min-width: 0; }
.cv-r1 { display: flex; align-items: center; gap: 6px; }
.cv-r1 b { font-size: 14.5px; color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-t { margin-inline-start: auto; font-size: 11px; color: var(--muted2); white-space: nowrap; }
.cv-r2 { display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.cv-last { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-last i { font-style: normal; color: var(--aqua); }
.badge.cv-b { position: static; flex: none; }
.cv-none { text-align: center; color: var(--muted); padding: 30px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cv-thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.cv-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(233, 196, 106, 0.22); background: linear-gradient(180deg, rgba(var(--rgb-sap), 0.35), rgba(var(--rgb-navy-lo), 0.1)); }
.cv-h .grow { min-width: 0; }
.cv-h .cv-n { display: block; font-family: var(--title); font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-h small { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.cv-back { display: none; }
.cv-msgs { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; user-select: text;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(var(--rgb-glow), 0.08), transparent 70%); }
.cv-more { text-align: center; margin-bottom: 4px; }
.cv-day { display: flex; justify-content: center; margin: 8px 0 4px; }
.cv-day span { font-size: 11px; font-weight: 800; color: var(--gold); padding: 2px 12px; border-radius: 999px; background: rgba(var(--rgb-well), 0.55); border: 1px solid rgba(233, 196, 106, 0.3); }
.cv-msg { display: flex; }
.cv-msg.them { justify-content: flex-start; }
.cv-msg.mine { justify-content: flex-end; }
.cv-msg .bub { position: relative; max-width: min(74%, 520px); padding: 8px 13px 18px; border-radius: 18px; font-size: 14.5px; line-height: 1.75; word-wrap: break-word; overflow-wrap: anywhere; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); }
.cv-msg.them .bub { background: linear-gradient(180deg, rgba(var(--rgb-navy), 0.92), rgba(var(--rgb-navy-lo), 0.95)); border: 1px solid rgba(var(--rgb-hair), 0.22); border-start-start-radius: 6px; color: var(--ivory); }
.cv-msg.mine .bub { background: linear-gradient(180deg, var(--bub-1), var(--bub-2)); border: 1px solid rgba(240, 207, 122, 0.55); border-start-end-radius: 6px; color: #fff; }
.cv-msg .bub .subj { font-weight: 900; color: var(--gold-hi); margin-bottom: 2px; }
.cv-msg .bub .tm { position: absolute; bottom: 3px; inset-inline-end: 10px; font-size: 10px; color: rgba(255, 255, 255, 0.6); direction: ltr; }
.cv-sys { display: flex; gap: 10px; align-items: flex-start; margin: 4px auto; max-width: 560px; width: 100%; padding: 10px 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(90, 62, 16, 0.4), rgba(42, 12, 72, 0.35)); border: 1px solid rgba(233, 196, 106, 0.55); font-size: 14px; line-height: 1.8; }
.cv-sys b { color: var(--gold-hi); display: block; }
.cv-sys small { color: var(--muted); font-size: 11px; }
.cv-start, .cv-empty { margin: auto; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px; }
.cv-empty h3 { margin: 4px 0 0; font-family: var(--title); color: var(--gold); font-size: 22px; }
.cv-empty img.ic, .cv-start img.ic { opacity: .9; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5)); }
.cv-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px 12px; border-top: 1px solid rgba(233, 196, 106, 0.22); background: rgba(var(--rgb-well), 0.35); position: relative; }
.cv-form textarea { flex: 1; resize: none; min-height: 42px; max-height: 140px; padding: 10px 14px; border-radius: 16px; border: 1px solid rgba(233, 196, 106, 0.35); background: rgba(var(--rgb-well), 0.6); color: var(--ivory); font-size: 14.5px; line-height: 1.5; outline: none; font-family: inherit; }
.cv-form textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(233, 196, 106, 0.18); }
.cv-cnt { position: absolute; top: -18px; inset-inline-start: 18px; font-size: 10.5px; color: var(--muted); }
.cv-send { width: 46px; min-height: 46px; border-radius: 50%; }
.cv-ro { padding: 12px; text-align: center; color: var(--muted); font-size: 13px; border-top: 1px solid rgba(233, 196, 106, 0.18); }
.nc-sug { display: flex; gap: 5px; flex-wrap: wrap; margin: -6px 0 10px; }
.nc-sug .chip { cursor: pointer; }
.nc-sug .chip:hover { border-color: var(--gold); }

/* ---------- تجاوب fe_features */
@media (max-width: 900px) {
  .hero-wrap { grid-template-columns: 1fr; }
  .hero-side { position: static; }
  .pedestal.hero-stage { height: 230px; }
  .hero-stage .hface { width: 200px; height: 200px; }
  .hero-stage .lvl-ring.hl { inset-inline-start: calc(50% - 140px); }
  .cv-wrap { grid-template-columns: minmax(0, 1fr); }
  .cv-list, .cv-it, .cv-thread { min-width: 0; }
  .cv-wrap .cv-thread { display: none; }
  .cv-wrap.open .cv-thread { display: flex; }
  .cv-wrap.open .cv-list { display: none; }
  .cv-back { display: inline-flex; }
  .king-rules { grid-template-columns: 1fr; }
  .rank-hero { flex-direction: column; text-align: center; }
  .rank-hero .gbar { margin-inline: auto; }
  .rank-hero .row-flex { justify-content: center; }
}
@media (max-width: 560px) {
  .attr-grid { grid-template-columns: 1fr; }
  .hero-rec { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .dq { grid-template-columns: 48px 1fr; gap: 10px; padding: 10px; }
  .dq-ic { width: 48px; height: 48px; }
  .dq-ic img.ic { width: 34px; height: 34px; }
  .dq-act { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
  .podium { gap: 5px; }
  .pod { padding-left: 4px; padding-right: 4px; }
  .pod .pod-ic { width: 54px; height: 54px; }
  .pod.p1 .pod-ic { width: 62px; height: 62px; }
  .pod .pod-ic img.ic { width: 44px; height: 44px; }
  .pod-v { font-size: 14px; }
  .tbl .hm { display: none; }
  .pl-tbl .sub-l { display: none; }
  .rung { grid-template-columns: 54px 1fr 70px 24px; gap: 8px; padding: 6px 8px; }
  .rung .rg-ins { width: 50px; height: 50px; }
  .rung .rg-ins img.ic { width: 44px; height: 44px; }
  .rung .rg-t { font-size: 16px; }
  .ladder { padding-inline-start: 0; }
  .ladder::before { inset-inline-start: 32px; }
  .med-sum { grid-template-columns: repeat(3, 1fr); }
  .medal-grid { grid-template-columns: repeat(2, 1fr); }
  .ach-grid { grid-template-columns: 1fr 1fr; }
  .treasury { flex-direction: column; text-align: center; padding: 12px; }
  .tr-txt > b { justify-content: center; }
  .treasury .row-flex { justify-content: center; }
  .pack-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pk-ic { height: 86px; }
  .pk-ic img.ic { width: 80px; height: 80px; }
  .pk-amt b { font-size: 21px; }
  .prof-head { flex-direction: column; text-align: center; }
  .prof-head .row-flex { justify-content: center; }
  .prof-head .ph-ins { width: 92px; height: 92px; }
  .prof-head .ph-ins img.ic { width: 78px; height: 78px; }
  .prof-head .gbar { margin-inline: auto; }
  .medal-hero { flex-direction: column; text-align: center; }
  .cv-msg .bub { max-width: 86%; }
  .cv-tools { padding: 10px 8px 8px; }
  .modal.convs-m { height: calc(100% - 16px); }
  .hs { display: none; }
}
.gbar.hp > i { background: linear-gradient(var(--ang90), #0d6a4a, #3fd39a 70%, #b8ffe0); background-size: auto; box-shadow: 0 0 10px rgba(63, 211, 154, 0.5); }
.gbar.hp.mid > i { background: linear-gradient(var(--ang90), #8c6420, #e9c46a 70%, #fff0b8); box-shadow: 0 0 10px rgba(233, 196, 106, 0.5); }
.gbar.hp.lo > i { background: linear-gradient(var(--ang90), #7a1028, #e0405a 70%, #ff9aaa); box-shadow: 0 0 10px rgba(224, 64, 90, 0.55); }
.stat-cards.hero-stats { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .stat-cards.hero-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .sub-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .sub-tabs::-webkit-scrollbar { display: none; }
  .sub-tabs button { flex: none; }
}

/* ============================================================ VIS-9: نص اللاعبين باتجاهه الذاتي */
/* الرسائل والعناوين والأسماء قد تُكتب بالإنجليزية أو مختلطة: كل سطر يأخذ اتجاه أول حرف قوي فيه (مع dir="auto" في الوسم)
   بدل أن يفرض عليه اتجاه الواجهة العربي فيُعاد ترتيب كلماته. .ut-in للحقول: النص الإنجليزي يبدأ من اليسار والتلميح يبقى عربياً. */
.ut, .ut-in { unicode-bidi: plaintext; }
.cv-h .cv-n { text-align: match-parent; }
/* اسم القرية في الشريط العلوي ونص الرسالة في التقارير: عنصر لا يحوي إلا نص اللاعب */
#top-bar .vname > span, .letter { unicode-bidi: plaintext; }
.cv-last { display: flex; align-items: baseline; gap: 4px; }
.cv-last > i { flex: none; }
.cv-last .cv-lt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }

/* ============================================================ VIS-10: لمسات إطار النوافذ (الهاتف خاصة) */
/* شريط الكتابة في المحادثة ملاصق لأسفل النافذة: يبتعد عن زخارف الزوايا الذهبية (.orn: 30px على بعد 5px من الحافة)
   فلا تُرسم فوق زر الإرسال ولا فوق إطار الحقل. على الحاسوب يلامس الحافة اليسرى فقط (القائمة على يمينه). */
.convs-m .cv-form { padding: 10px 14px 16px; padding-inline-end: 25px; }
/* «جارٍ الرفع إلى المستوى 7»: الرقم لا ينفصل عن كلمته، والنص يأخذ عرضه قبل أن تنتقل الأزرار إلى سطر ثانٍ */
.nw { white-space: nowrap; }
.q-item.bq .grow { flex: 1 1 auto; }
/* شريط التبويبات القابل للتمرير (الهاتف) لا ينضغط عمودياً حين يطول محتوى النافذة: عنصر التمرير في عمود مرن حدّه الأدنى 0
   فكانت أزرار «دليل الممالك» وأمثالها تُسحق إلى 15px ويفيض نصها خارجها — المحتوى (.modal-b) هو الذي يتقلص */
.modal-tabs { flex-shrink: 0; }
@media (max-width: 900px) {
  .convs-m .cv-form { padding-inline: 25px; }
}
@media (max-width: 560px) {
  /* ثلاثة تبويبات أو أقل: تتقاسم عرض الشاشة وينكسر نصها على سطرين بدل أن يُقصّ آخرها عند الحافة دون أي إشارة */
  .modal-tabs:not(:has(> button:nth-child(4))) { overflow-x: visible; -webkit-mask-image: none; mask-image: none; }
  .modal-tabs:not(:has(> button:nth-child(4))) > button { flex: 1 1 0; min-width: 0; justify-content: center; padding: 5px 8px; border-radius: 14px; line-height: 1.25; }
  .modal-tabs:not(:has(> button:nth-child(4))) > button > span { white-space: normal; text-align: center; overflow-wrap: break-word; min-width: 0; }
}

/* ============================================================ UI-R1: زخارف الزوايا لا تُرسم فوق المحتوى المتحرك */
/* زخارف .orn السفلية (30px على بعد 5px من الحافة: خط الإطار حتى 11px، والالتفافات والمعيّن حتى ~24px من الزاوية) ترسم فوق
   محتوى النافذة؛ فكان المحتوى المتحرك (بطاقات المتجر، بطاقة قائمة البناء) يمر تحتها. المحتوى الآن يتلاشى في آخر 28px من منطقة
   التمرير (فلا يقع تحت الزخرفة إلا محتوى شفاف)، وحشوة سفلية 30px تجعل آخر سطر يقف فوق التلاشي عند نهاية التمرير.
   نافذة المحادثات مستثناة: شريط الكتابة فيها له حشوته الخاصة (VIS-10). */
.modal:not(.convs-m) > .modal-b {
  padding-bottom: 30px;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent calc(100% - 3px));
  mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent calc(100% - 3px));
}

/* ============================================================ v3 building panel: لوحة المبنى المثبّتة (ui-building.js) */
/* نافذة المبنى في القرية لا تغطي المبنى: لوحة جانبية على الحاسوب (.modal.dock.dk-side، على الجانب البعيد عن المبنى) وورقة سفلية
   بمقبض على الهاتف (.modal.dock.dk-sheet)، بلا خلفية معتمة. الجذر لا يحجب النقر عن المشهد ما دامت فيه لوحة مثبّتة (has-dock)؛
   النوافذ العادية فوقها تحجبه بخلفيتها كما كانت. المقاسات من ui-building.js: --dw العرض، --dt/--db البعد عن أعلى/أسفل الشاشة،
   --sh ارتفاع الورقة؛ وعلى #game: --dock-w (عرض اللوحة + الهامش) و--dock-top (تحت الشريط العلوي) لإزاحة لوحات الواجهة بجانبها. */
/* (isolation: بلا تحويل لا سياق تكديس للوحة، فكانت عناصرها ذات z-index ترتسم فوق نافذة عادية تُفتح فوقها وخلفيتها المعتمة) */
#modal-root.has-dock { pointer-events: none; }
#modal-root.has-dock .backdrop, #modal-root.has-dock .modal { pointer-events: auto; }
.dock-wrap > .backdrop { display: none; }
.modal.dock { transform: none; max-height: none; isolation: isolate; box-shadow: 0 0 0 3px rgba(var(--rgb-deep), 0.92), 0 0 0 4px rgba(233, 196, 106, 0.38), 0 18px 54px rgba(0, 0, 0, 0.72), 0 0 50px rgba(var(--rgb-glow), 0.14); }
.modal.dock.dk-side { top: var(--dt, 10px); bottom: var(--db, 10px); width: var(--dw, 420px) !important; left: auto; right: 10px; animation: dockIn .22s ease-out; }
.modal.dock.dk-side.dk-l { left: 10px; right: auto; --dx: -1; }
.modal.dock.dk-side.dk-r { --dx: 1; }
@keyframes dockIn { from { transform: translateX(calc(var(--dx, 1) * 36px)); opacity: 0; } }
.modal.dock.dk-sheet { left: 6px; right: 6px; top: auto; bottom: 0; width: auto !important; height: var(--sh, 52%); border-radius: 18px 18px 0 0; border-bottom: 0;
  transition: height .22s ease-out; animation: sheetIn .24s ease-out; }
.modal.dock.dk-sheet.dragging { transition: none; }
@keyframes sheetIn { from { transform: translateY(36%); opacity: 0; } }
.sheet-grab { flex: none; height: 22px; margin-bottom: -8px; display: grid; place-items: center; cursor: ns-resize; touch-action: none; z-index: 4; }
.sheet-grab i { width: 48px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, rgba(233, 196, 106, 0.45), #f0cf7a, rgba(233, 196, 106, 0.45)); box-shadow: 0 0 8px rgba(240, 207, 122, 0.45), 0 1px 0 rgba(0, 0, 0, 0.6); }
.modal.dock.dk-sheet .modal-h { touch-action: none; cursor: ns-resize; }
.modal.dock.dk-sheet .modal-h .close { cursor: pointer; }
/* لوحة قصيرة (الورقة السفلية، أو جانبية أقصر من 560 — الهاتف الأفقي): بطاقة الترقية (وقائمة البناء الجارية) أولاً تحت الرأس،
   ثم المجسّم والإحصاءات ثم التبويبات */
.modal.dock.dk-compact .modal-b { display: flex; flex-direction: column; }
.modal.dock.dk-compact .modal-b > * { flex-shrink: 0; }
.modal.dock.dk-compact .modal-b > .sec:has(> .q-list > .q-item.bq) { order: -2; margin-top: 0; }
.modal.dock.dk-compact .modal-b > .up-card { order: -1; margin: 0 0 12px; }
.modal.dock.dk-compact .modal-b > .sec:has(> .q-list > .q-item.bq) + .up-card { margin-top: 10px; }
/* المحتوى في العرض الضيق: عمود واحد، المجسّم مصغّر بجانب الوصف (المبنى نفسه ظاهر في القرية)، والبطاقات عمودان */
.modal.dock .modal-h { padding: 10px 14px 10px; gap: 10px; }
.modal.dock .modal-h .medal { width: 42px; height: 42px; }
.modal.dock .modal-h .medal img { width: 34px; height: 34px; }
.modal.dock .modal-h h2 { font-size: 21px; }
.modal.dock .modal-b { padding: 12px 14px 30px; }
.modal.dock .bld-hero { grid-template-columns: 132px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: start; }
.modal.dock .bld-hero > .pedestal { grid-row: 1 / span 2; grid-column: 1; height: 148px; }
.modal.dock .bld-hero > .bld-id { display: contents; }
.modal.dock .bld-id > .kicker { grid-column: 2; margin: 2px 0 0; }
.modal.dock .bld-id > .lead:nth-child(2) { grid-column: 2; margin: 0; font-size: 13px; line-height: 1.7; }
.modal.dock .bld-id > :nth-child(n+3) { grid-column: 1 / -1; }
.modal.dock .pedestal .bimg { width: 124px; height: 124px; margin-bottom: 14px; }
.modal.dock .pedestal .base { width: 120px; height: 34px; bottom: 6px; }
.modal.dock .pedestal .glow { width: 140px; height: 124px; }
.modal.dock .pedestal .rays { width: 160px; height: 160px; }
.modal.dock .pedestal .lock { width: 46px; height: 46px; }
.modal.dock .pedestal .ribbon { font-size: 10.5px; padding: 2px 8px; bottom: -2px; }
.modal.dock .lvl-ring { top: -2px; inset-inline-start: -4px; width: 52px; height: 52px; }
.modal.dock .lvl-ring svg { width: 52px; height: 52px; }
.modal.dock .lvl-ring .in { width: 40px; height: 40px; }
.modal.dock .lvl-ring .in b { font-size: 17px; }
.modal.dock .lvl-ring .in small { font-size: 9px; }
.modal.dock .stat-cards { grid-template-columns: 1fr 1fr; margin-top: 6px; }
.modal.dock .stat-cards.hero-stats { grid-template-columns: 1fr 1fr; }
.modal.dock .up-card { margin-top: 12px; padding: 12px 12px; }
.modal.dock .up-card .uh h4 { font-size: 17px; }
.modal.dock .btn.xl { min-width: 0; font-size: 16px; min-height: 52px; padding: 8px 14px; }
.modal.dock .btn.xl img.ic { width: 28px; height: 28px; }
.modal.dock .unit-row { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 10px; }
.modal.dock .unit-row img.u { width: 64px; height: 64px; }
.modal.dock .unit-row .train-ctl { grid-column: 1 / -1; min-width: 0; }
/* التدريب: العدّاد سطراً كاملاً، ثم «الحد الأقصى» و«تدريب» متجاورين */
.modal.dock .unit-row .train-ctl:has(> .stepper) { display: grid; grid-template-columns: 1fr 1fr; }
.modal.dock .unit-row .train-ctl > .stepper { grid-column: 1 / -1; }
.modal.dock .battle, .modal.dock .bld-grid { grid-template-columns: 1fr; }
.modal.dock .tbl { font-size: 12.5px; }
.modal.dock .tbl th, .modal.dock .tbl td { padding: 6px 5px; }
.modal.dock .lvl-tbl .cost.sm { gap: 3px; }
.modal.dock .q-item .grow { min-width: 0; }
.modal.dock .pedestal.hero-stage { height: 220px; }
.modal.dock .sec-tabs { margin: 14px -14px 0; padding: 8px 8px 6px; top: -12px; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
.modal.dock .sec-tabs::-webkit-scrollbar { display: none; }
.modal.dock .sec-tabs.scrolls { -webkit-mask-image: linear-gradient(var(--ang90), transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(var(--ang90), transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); scroll-padding-inline: 26px; }
.modal.dock .sec-tabs button { padding: 6px 11px; font-size: 12.5px; flex: none; }
/* ثلاثة تبويبات أو أقل تتقاسم العرض (كالهاتف) */
.modal.dock .sec-tabs:not(:has(> button:nth-child(4))) { overflow-x: visible; -webkit-mask-image: none; mask-image: none; }
.modal.dock .sec-tabs:not(:has(> button:nth-child(4))) > button { flex: 1 1 0; min-width: 0; justify-content: center; padding: 6px 8px; border-radius: 14px; line-height: 1.25; }
.modal.dock .sec-tabs:not(:has(> button:nth-child(4))) > button > span { white-space: normal; text-align: center; overflow-wrap: break-word; min-width: 0; }
.modal.dock .inp.n { max-width: 110px; }
/* لوحات الواجهة على جانب اللوحة تُزاح بجانبها (الموارد تحت الشريط العلوي، والبطل بجانبها، والأحداث، وأزرار التكبير) */
#game.dock-l #res-panel { left: calc(var(--dock-w) + 10px); top: var(--dock-top); }
#game.dock-l #hero-btn { left: calc(var(--dock-w) + 206px); top: var(--dock-top); }
#game.dock-l #events { left: calc(var(--dock-w) + 10px); }
#game.dock-r #zoom-ctl { right: calc(var(--dock-w) + 12px); }
/* الشريط السفلي تحت اللوحة ويتسع له الجزء المكشوف (الهاتف الأفقي): ينتقل إلى وسط ذلك الجزء */
#game.dock-bb.dock-r #bottom-bar { left: calc((100% - var(--dock-w)) / 2); }
#game.dock-bb.dock-l #bottom-bar { left: calc(var(--dock-w) + (100% - var(--dock-w)) / 2); }
/* شريط تقدّم البناء الجاري داخل اللوحة (data-pb) */
.q-item.bq { position: relative; overflow: hidden; }
.q-item .q-pb { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.06); }
.q-item .q-pb i { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(var(--ang270), var(--sap-glow), #f0cf7a); box-shadow: 0 0 6px rgba(240, 207, 122, 0.6); transition: width .25s linear; }
/* رُفع المستوى واللوحة مفتوحة: وميض ذهبي على المجسّم */
.pedestal.lv-up .glow { animation: lvUp 1.6s ease-out 2; }
.pedestal.lv-up .bimg { animation: lvPop .7s ease-out; }
@keyframes lvUp { 0% { filter: blur(4px) brightness(1); } 30% { filter: blur(6px) brightness(2.2); } 100% { filter: blur(4px) brightness(1); } }
@keyframes lvPop { 0% { transform: scale(.88); opacity: .4; } 60% { transform: scale(1.05); } 100% { transform: none; } }
/* تنبيه السعة: الكلفة أكبر من سعة المخزن/الصومعة */
.cap-hint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding: 7px 10px; border-radius: 12px; font-size: 13px; font-weight: 700; line-height: 1.6; color: #ffd9a0;
  background: linear-gradient(var(--ang90), rgba(122, 70, 10, 0.42), rgba(var(--rgb-deep), 0.35)); border: 1px solid rgba(233, 160, 70, 0.55); }
.cap-hint .grow { flex: 1 1 200px; min-width: 0; }
.cap-hint small { color: var(--muted); font-weight: 700; }
.cap-hint .btn { flex: none; }

/* ============================================================ v3 HUD — شريط الموارد (الفائض فوق السعة، المجاعة)، التدريب
   والأبحاث مجمّعة حسب المبنى في لوحة الأحداث، تحذير المجاعة في نافذة الإرسال (ui-hud.js / ui-world.js) */
/* سطر الحالة تحت رقم المورد: .rs-n يظهر حين يُخفى عمود المعدل (الشاشات الضيقة)، .rs-w يُخفى على الهاتف */
.res { flex-wrap: wrap; row-gap: 0; }
.res .sub { flex: 1 0 100%; order: 9; display: flex; align-items: center; justify-content: flex-start; gap: 3px; margin: -3px 0 2px; padding: 0 2px; font-size: 11px; font-weight: 800; line-height: 1.3; white-space: nowrap; overflow: hidden; }
.res .sub.hidden { display: none; }
.res .sub img.ic { width: 13px; height: 13px; flex: none; }
.res .sub b { font-variant-numeric: tabular-nums; }
.res .sub .rs-n { display: none; }
.res .fam-ic { display: none; }
.res .bar b { position: absolute; top: 0; bottom: 0; right: 0; width: 0; box-shadow: -1px 0 0 rgba(255, 255, 255, 0.85); background: repeating-linear-gradient(135deg, #ffcf5a 0 3px, #ff8a2a 3px 6px); }
/* فائض فوق السعة: شريحة كهرمانية مع مهلته */
.res.over { border-color: rgba(255, 176, 74, 0.75); background: linear-gradient(180deg, rgba(92, 52, 6, 0.62), rgba(var(--rgb-deep), 0.5)); }
.res.over .sub { color: #ffd27a; }
/* سينفد القمح: تحذير كهرماني بعدّ تنازلي */
.res.soon { border-color: rgba(233, 160, 70, 0.6); }
.res.soon .sub { color: #ffcf7a; }
/* مجاعة: المدخل كله تحذير أحمر (أيقونة التحذير، «مجاعة»، العجز، موعد هروب الجندي التالي) */
.res.famine { border-color: #ff5a6a; background: linear-gradient(180deg, rgba(150, 14, 40, 0.78), rgba(80, 6, 22, 0.66)); animation: famPulse 1.6s ease-in-out infinite; }
.res.famine .sock img:not(.fam-ic) { display: none; }
.res.famine .fam-ic { display: block; }
.res.famine .val { color: #ffd2d8; letter-spacing: 0; }
.res.famine .rate { color: #ffb3bd; }
.res.famine .sub { color: #ffc4cc; }
.res.famine .sub b { color: #fff; }
@keyframes famPulse { 50% { box-shadow: 0 0 14px rgba(255, 74, 100, 0.55); } }
@media (max-width: 900px) { .res .sub .rs-n { display: inline; } }
/* الحاسوب: كل سطر حالة يطيل لوحة الموارد ~15px فتقصر لوحة الأحداث تحتها بقدره (--res-sub = عدد الأسطر، من ui-hud.js) */
@media (min-width: 901px) and (min-height: 501px) { #events { max-height: calc(100% - 440px - var(--res-sub, 0) * 15px); } }
/* الهاتف (والأفقي القصير): الخلية بارتفاعها نفسه — الأيقونة بجانب سطرين صغيرين (الرقم ثم الحالة) فلا تطول لوحة الموارد */
@media (max-width: 560px), (max-height: 500px) and (min-width: 561px) {
  .res .sub { gap: 2px; }
  .res .sub .rs-w { display: none; }
  .res .sub img.ic { width: 10px; height: 10px; }
  .res:has(> .sub:not(.hidden)) { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 12px 10px; column-gap: 4px; row-gap: 0; align-content: center; }
  .res:has(> .sub:not(.hidden)) .sock { grid-row: 1 / 3; }
  .res:has(> .sub:not(.hidden)) .val { grid-column: 2; grid-row: 1; font-size: 12px; line-height: 12px; }
  .res:has(> .sub:not(.hidden)) .sub { grid-column: 2; grid-row: 2; margin: 0; padding: 0; font-size: 9px; line-height: 10px; }
  .toast.mini { font-size: 12px; padding: 4px 11px 4px 8px; padding-inline: 11px 8px; }
}
/* الهاتف الأفقي: خلايا الموارد أضيق (اللوحة 330px) — شريحة الفائض «+X · الوقت» بلا كلمة «فائض» (لونها الكهرماني وتلميحها يبيّنانها) */
@media (max-height: 500px) and (min-width: 561px) { .res .sub .rs-o { display: none; } }
/* الهاتف: التنبيهات بعرض الشاشة (لا نصفها) وتحت لوحة الموارد، فلا تغطي تحذير المجاعة؛ والخريطة المصغرة تبدأ تحت لوحة الموارد
   (كانت تغطي حافة صفها الثاني ~7px) وتنتهي قبل الأزرار الجانبية (196px) */
@media (max-width: 560px) {
  #toasts { width: calc(100% - 16px); top: 122px; }
  #right-col { top: 124px; }
  #mini { height: 62px; }
}
/* تلميح المورد: أسطر الفائض والمجاعة */
#tooltip .tip-v3 { margin-top: 6px; padding: 5px 8px; border-radius: 8px; font-size: 12.5px; line-height: 1.6; }
#tooltip .tip-v3 img.ic { width: 15px; height: 15px; vertical-align: -3px; }
#tooltip .tip-v3.over, #tooltip .tip-v3.warn { color: #ffe0a8; background: rgba(122, 70, 10, 0.45); border: 1px solid rgba(233, 160, 70, 0.5); }
#tooltip .tip-v3.bad { color: #ffd6dc; background: rgba(150, 14, 40, 0.5); border: 1px solid rgba(255, 90, 110, 0.6); }
#tooltip .tip-v3.bad b { color: #fff; }
#tooltip .tip-v3.note { color: var(--muted); background: rgba(var(--rgb-well), 0.4); border: 1px solid rgba(var(--rgb-hair), 0.14); font-size: 12px; }
/* تنبيه صغير (الفائض، اختفاء الفائض) */
.toast.mini { padding: 5px 13px 5px 9px; padding-inline: 13px 9px; gap: 7px; font-size: 12.5px; font-weight: 700; border-radius: 11px; }
.toast.mini img.ic { width: 20px; height: 20px; }
.toast.mini.info { color: #ffe0a8; border-color: rgba(233, 160, 70, 0.7); }

/* لوحة الأحداث: مبنى = صف (الدفعة الجارية بصورة أكبر واسمها الكامل) + سهم يفتح قائمة منسدلة بكل دفعاته */
.tq { flex-shrink: 0; display: flex; flex-direction: column; }
.tq-h { padding-inline-end: 6px; }
.tq-h .ic-w.tq-u { width: 40px; height: 40px; }
.tq-img { position: relative; display: inline-grid; place-items: center; flex: none; }
.ev .ic-w.tq-u .tq-img > img:first-child { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
.tq-img img.kd { position: absolute; inset-inline-start: -5px; bottom: -4px; width: 17px; height: 17px; }
.tq-h .tx { line-height: 1.3; }
.tq-n { display: block; color: var(--ivory); font-weight: 800; font-size: 13px; }
.tq .nm { white-space: normal; overflow-wrap: anywhere; }
.tq .ct { color: var(--gold-hi); }
.tq .lv { color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.ev .tx small.tq-s { white-space: normal; overflow: visible; display: flex; flex-wrap: wrap; align-items: center; gap: 0 3px; margin-top: 1px; }
.tq-s img.ic { width: 15px; height: 15px; }
.tq-t small [data-end] { color: var(--cream); font-weight: 800; direction: ltr; unicode-bidi: isolate; }
.tq-t { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: none; }
.tq-t small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.tq-chev { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; padding: 0; cursor: pointer; background: rgba(var(--rgb-navy), 0.55); border: 1px solid rgba(233, 196, 106, 0.45); transition: background .15s, border-color .15s; }
.tq-chev img.ic { width: 16px; height: 16px; transition: transform .26s ease; }
.tq-chev:hover, .tq-chev:focus-visible { border-color: var(--gold-hi); background: rgba(var(--rgb-sap-hi), 0.6); outline: none; }
.tq.open > .tq-h { border-color: rgba(233, 196, 106, 0.55); }
.tq.open .tq-chev img.ic { transform: rotate(180deg); }
/* الحركة: الصفوف من 0fr إلى 1fr (ارتفاع القائمة الحقيقي)، والقائمة الطويلة تتمرر */
.tq-drop { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .26s ease, opacity .22s ease; }
.tq.open > .tq-drop { grid-template-rows: 1fr; opacity: 1; }
.tq-clip { min-height: 0; overflow: hidden; }
.tq-list { max-height: 236px; overflow-y: auto; margin: 3px 0 1px; padding: 4px; display: flex; flex-direction: column; gap: 3px; border-radius: 9px; background: rgba(var(--rgb-well), 0.55); border: 1px solid rgba(var(--rgb-hair), 0.14); scrollbar-width: thin; overscroll-behavior: contain; }
.tq-r { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 3px 6px; border-radius: 8px; font-size: 12px; cursor: pointer; flex-shrink: 0; }
.tq-r:hover { background: rgba(var(--rgb-navy), 0.45); }
.tq-r.run { background: linear-gradient(var(--ang270), rgba(var(--rgb-glow), 0.2), transparent 80%); box-shadow: inset calc(-2px * var(--fx)) 0 0 var(--gold); }
.tq-r .tq-img > img:first-child { width: 30px; height: 30px; object-fit: contain; }
.tq-r .tq-img img.kd { width: 14px; height: 14px; inset-inline-start: -4px; bottom: -3px; }
.tq-w { color: var(--ivory); line-height: 1.3; min-width: 0; }
.tq-e { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.tq-e .tm { font-weight: 800; color: var(--gold-hi); direction: ltr; font-size: 12px; }
.tq-e small { font-size: 10px; color: var(--muted); white-space: nowrap; }
.tq-f { display: flex; align-items: center; gap: 5px; flex-shrink: 0; margin-top: 1px; padding: 4px 6px 2px; font-size: 11px; color: var(--muted); border-top: 1px dashed rgba(var(--rgb-hair), 0.2); }
.tq-f img.ic { width: 15px; height: 15px; flex: none; }
.tq-f b { color: var(--gold-hi); direction: ltr; unicode-bidi: isolate; }
@media (max-width: 560px), (max-height: 500px) and (min-width: 561px) {
  .tq-h .ic-w.tq-u, .ev .ic-w.tq-u .tq-img > img:first-child { width: 32px; height: 32px; }
  .tq-n { font-size: 12px; }
  .tq-chev { width: 24px; height: 24px; }
  .tq-list { max-height: 204px; padding: 3px; }
  .tq-r { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 6px; padding: 2px 5px; font-size: 11.5px; }
  .tq-r .tq-img > img:first-child { width: 26px; height: 26px; }
}
/* الهاتف: لوحة الأحداث أطول حين تكون قائمة منسدلة مفتوحة */
@media (max-width: 560px) { #events:has(.tq.open) { max-height: 38%; } }

/* نافذة الإرسال: تحذير المجاعة / نفاد القمح */
.send-fam { margin-bottom: 12px; }
.send-fam.hidden { display: none; }
.fam-note { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.7; }
.fam-note img.ic { flex: none; width: 30px; height: 30px; margin-top: 2px; }
.fam-note .grow { flex: 1; min-width: 0; }
.fam-note small { font-size: 12.5px; opacity: .88; }
.fam-note [data-end] { direction: ltr; unicode-bidi: isolate; }
.fam-note.bad { color: #ffd6dc; background: linear-gradient(var(--ang90), rgba(150, 14, 40, 0.62), rgba(60, 6, 20, 0.45)); border: 1px solid rgba(255, 90, 110, 0.75); box-shadow: 0 0 18px rgba(255, 74, 100, 0.2); }
.fam-note.bad b { color: #fff; }
.fam-note.warn { color: #ffe0a8; background: linear-gradient(var(--ang90), rgba(122, 70, 10, 0.5), rgba(var(--rgb-deep), 0.35)); border: 1px solid rgba(233, 160, 70, 0.6); }
.fam-note.warn b { color: #ffd27a; }

/* ============================================================ v3 truce: شريط الهدنة بجانب الأسماء، نافذة الاقتراح، تبويب «الهدنات» (ui-truce.js) */
/* الشريط المدمج: أيقونة الدبلوماسية + شريط رفيع للوقت الباقي (أخضر سارية، كهرماني في مهلة الإنهاء)؛ .txt = مع كلمة «هدنة» */
.tr-pill { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; margin-inline-start: 6px; padding: 1px 6px 1px 3px; padding-inline: 6px 3px; min-height: 20px; border-radius: 999px; flex: none; white-space: nowrap; cursor: help; line-height: 1;
  background: linear-gradient(180deg, rgba(22, 120, 84, 0.55), rgba(6, 40, 30, 0.7)); border: 1px solid rgba(63, 211, 154, 0.7); box-shadow: 0 0 8px rgba(63, 211, 154, 0.22); }
.tr-pill img.ic { width: 15px; height: 15px; }
.tr-pill .tr-c { display: inline-flex; flex-direction: column; justify-content: center; gap: 2px; }
.tr-pill .tr-c > span { font-size: 10.5px; font-weight: 900; color: #c4f7df; font-family: var(--font); }
.tr-pill .tr-bar { display: block; width: 20px; height: 3px; border-radius: 3px; background: rgba(0, 0, 0, 0.6); overflow: hidden; }
.tr-pill.txt .tr-bar { width: auto; min-width: 30px; }
.tr-pill .tr-bar > b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(var(--ang90), #12a06a, #8af0c4); }
.tr-pill.tr-end { background: linear-gradient(180deg, rgba(140, 84, 12, 0.6), rgba(50, 26, 4, 0.72)); border-color: rgba(255, 180, 58, 0.8); box-shadow: 0 0 8px rgba(255, 180, 58, 0.25); }
.tr-pill.tr-end .tr-bar > b { background: linear-gradient(var(--ang90), #c06a10, #ffd27a); }
.tr-pill.tr-end .tr-c > span { color: #ffe2b0; }
.tr-pill.done { display: none; }
.tr-pill.tr-demo { cursor: default; margin-inline: 2px; }
.ph-n .tr-pill { margin-inline-start: 10px; min-height: 24px; padding: 2px 8px 2px 4px; padding-inline: 8px 4px; }
.ph-n .tr-pill .tr-c > span { font-size: 12px; }
.pc-nr, .cv-nr { display: flex; align-items: center; min-width: 0; flex-wrap: wrap; row-gap: 2px; }
.cv-nr .cv-n { min-width: 0; }
#chat .msg .tr-pill, #online-list .tr-pill { margin-inline-start: 4px; min-height: 17px; padding: 0 4px 0 2px; padding-inline: 4px 2px; }
#chat .msg .tr-pill img.ic, #online-list .tr-pill img.ic { width: 13px; height: 13px; }
.pill.tr-amber { background: rgba(255, 180, 58, 0.16); color: #ffd27a; border-color: rgba(255, 180, 58, 0.55); }
/* الشريط العريض للوقت الباقي (البطاقة، قائمة الهدن) */
.tr-track { height: 7px; border-radius: 7px; background: rgba(var(--rgb-well), 0.7); overflow: hidden; margin: 6px 0 4px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(63, 211, 154, 0.3); }
.tr-track > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(var(--ang90), #12a06a, #3fd39a 60%, #b8f7da); box-shadow: 0 0 8px rgba(63, 211, 154, 0.5); transition: width .6s; }
.tr-end .tr-track { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 180, 58, 0.35); }
.tr-end .tr-track > i { background: linear-gradient(var(--ang90), #a85a08, #ffb43a 60%, #ffe2b0); box-shadow: 0 0 8px rgba(255, 180, 58, 0.5); }
/* بطاقة اللاعب ولوحة المربع */
.tr-box { display: flex; align-items: flex-start; gap: 9px; margin: 8px 0; padding: 8px 10px; border-radius: 12px; font-size: 12.5px; line-height: 1.6; color: var(--cream);
  background: linear-gradient(var(--ang90), rgba(13, 106, 74, 0.4), rgba(var(--rgb-well), 0.45)); border: 1px solid rgba(63, 211, 154, 0.55); }
.tr-box > img.ic { margin-top: 2px; }
.tr-box .grow { min-width: 0; flex: 1; }
.tr-box b { color: var(--ivory); }
.tr-box small { display: block; color: var(--muted); font-size: 11.5px; }
.tr-box small b { color: #c4f7df; font-variant-numeric: tabular-nums; }
.tr-box.tr-end { background: linear-gradient(var(--ang90), rgba(122, 70, 10, 0.45), rgba(var(--rgb-well), 0.45)); border-color: rgba(255, 180, 58, 0.6); }
.tr-box.tr-end small b { color: #ffd27a; }
.tr-box.tr-pend { background: linear-gradient(var(--ang90), rgba(var(--rgb-sap), 0.45), rgba(var(--rgb-well), 0.45)); border-color: rgba(233, 196, 106, 0.55); }
.tr-box .tr-acts { margin-top: 6px; }
.tr-why { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; padding: 6px 9px; border-radius: 10px; font-size: 12px; font-weight: 700; line-height: 1.55; color: #ffe2b0;
  background: rgba(var(--rgb-well), 0.45); border: 1px dashed rgba(255, 180, 58, 0.5); }
.tr-why > span { flex: 1 1 160px; min-width: 0; }
.btn.tr-off, .btn.tr-off:hover { opacity: .5; filter: grayscale(.75); cursor: not-allowed; transform: none; box-shadow: none; }
#tooltip .tr-tip { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(63, 211, 154, 0.35); color: #c4f7df; font-weight: 700; }
#tooltip .tr-tip small { color: var(--muted); font-weight: 600; }
.toast.tr-toast { cursor: pointer; }
.act .badge.tr-badge { background: linear-gradient(180deg, #8af0c4, #12a06a); color: #03261a; }
/* نافذة «اقتراح هدنة» */
.tr-target { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 14px; background: linear-gradient(var(--ang90), rgba(var(--rgb-sap), 0.4), rgba(var(--rgb-well), 0.4)); border: 1px solid rgba(233, 196, 106, 0.4); }
.tr-target .grow { min-width: 0; }
.tr-target .k { font-size: 12px; color: var(--muted); font-weight: 700; }
.tr-target .tr-tn { display: block; font-family: var(--title); font-size: 21px; line-height: 1.3; color: var(--gold-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-av { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, var(--gem-hi2), var(--gem-lo2) 72%); box-shadow: 0 0 0 2px var(--gold), 0 4px 10px rgba(0, 0, 0, 0.5); }
.tr-card .tr-av { width: 42px; height: 42px; }
.tr-k { display: flex; align-items: center; gap: 6px; margin: 12px 0 7px; font-size: 13.5px; font-weight: 800; color: var(--gold); }
.tr-durs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 12px; }
.tr-dur { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 7px; border-radius: 12px; cursor: pointer; font-family: inherit; color: var(--cream);
  background: rgba(var(--rgb-well), 0.55); border: 1px solid rgba(var(--rgb-hair), 0.25); transition: border-color .15s, background .15s, transform .12s; }
.tr-dur b { font-size: 14px; font-weight: 900; white-space: nowrap; }
.tr-dur small { font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.3; }
.tr-dur:hover { border-color: rgba(233, 196, 106, 0.6); }
.tr-dur.on { background: linear-gradient(180deg, rgba(22, 120, 84, 0.6), rgba(6, 40, 30, 0.75)); border-color: #3fd39a; box-shadow: 0 0 0 1px rgba(63, 211, 154, 0.45), 0 0 14px rgba(63, 211, 154, 0.3); transform: translateY(-1px); }
.tr-dur.on b { color: #c4f7df; }
.tr-dur.on small { color: #a6e8c8; }
.tr-rules, .tr-cf { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--cream); line-height: 1.6; }
.tr-rules li { display: flex; gap: 7px; align-items: flex-start; }
.tr-rules li img.ic { margin-top: 2px; }
.tr-cf { margin: 8px 0 0; font-size: 13.5px; }
.tr-cf li::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-inline-end: 7px; vertical-align: middle; border-radius: 2px; transform: rotate(45deg); background: var(--gold); }
.tr-foot { justify-content: flex-end; }
/* تبويب «الهدنات» */
.tr-intro { display: flex; gap: 12px; align-items: flex-start; padding: 11px 14px; border-radius: 14px; background: linear-gradient(var(--ang90), rgba(13, 106, 74, 0.3), rgba(var(--rgb-deep), 0.4)); border: 1px solid rgba(63, 211, 154, 0.35); }
.tr-intro .grow { min-width: 0; }
.tr-intro > img.ic { flex: none; }
.tr-intro b { font-family: var(--title); font-size: 17px; color: var(--gold-hi); font-weight: 700; }
.tr-intro .lead { font-size: 12.5px; line-height: 1.75; margin-top: 2px; }
.tr-new { margin-top: 10px; }
.tr-new .tr-k { margin-top: 0; }
.tr-new-r { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.tr-new-r .search { min-width: 180px; }
.tr-new-r select { flex: 1; min-width: 160px; }
.tr-new .nc-sug { margin: 0 0 6px; }
.tr-sec h4 small { font-family: var(--font); }
.tr-card { position: relative; margin-bottom: 8px; padding: 10px 12px 9px; border-radius: 14px; background: var(--glass-2); border: 1px solid rgba(var(--rgb-hair), 0.18); border-inline-start: 4px solid rgba(var(--rgb-hair), 0.35); transition: box-shadow .3s; }
.tr-card.tr-act { border-inline-start-color: #3fd39a; }
.tr-card.tr-end { border-inline-start-color: #ffb43a; }
.tr-card.tr-in { border-inline-start-color: var(--gold); background: linear-gradient(var(--ang90), rgba(122, 90, 20, 0.28), rgba(var(--rgb-deep), 0.6)); }
.tr-card.focus { box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(233, 196, 106, 0.45); }
.tr-top { display: flex; gap: 10px; align-items: center; }
.tr-top .grow { min-width: 0; }
.tr-r1 { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tr-n { font-family: var(--title); font-size: 17px; font-weight: 700; color: var(--ivory); overflow-wrap: anywhere; }
.tr-r2 { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.tr-say { display: flex; gap: 7px; align-items: flex-start; margin-top: 7px; padding: 6px 9px; border-radius: 10px; background: rgba(var(--rgb-well), 0.4); border: 1px solid rgba(233, 196, 106, 0.22); font-size: 13px; color: var(--ivory); }
.tr-say .ut { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tr-say.sm { margin: 4px 0; font-size: 12px; }
.tr-time { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 12.5px; color: var(--cream); margin-top: 5px; }
.tr-time b { color: #c4f7df; font-variant-numeric: tabular-nums; }
.tr-card.tr-end .tr-time b { color: #ffd27a; }
.tr-card.tr-in .tr-time b, .tr-card.tr-out .tr-time b { color: var(--gold-hi); }
.tr-time .lead { font-size: 12px; }
.tr-note, .tr-warn { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.tr-warn { color: #ffc0c8; }
.tr-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.tr-acts .tr-ex { font-size: 11.5px; color: var(--muted); }
.tr-acts .tr-ro { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
/* صفحة التحالف: هدن التحالف */
.tr-al-note { font-size: 12.5px; margin: -4px 0 8px; }
.tr-al-tbl .tr-st { white-space: nowrap; }
.tr-al-tbl .tr-st .btn { margin-inline-start: 4px; }
.tr-al-tbl .tr-st small { font-size: 11px; }
/* الهاتف */
@media (max-width: 560px) {
  .tr-durs { grid-template-columns: 1fr 1fr; }
  .tr-target .tr-tn { font-size: 19px; }
  .tr-intro { flex-direction: column; align-items: center; text-align: center; }
  .tr-intro .row-flex { justify-content: center; }
  .tr-new-r .search { min-width: 0; flex: 1 1 100%; }
  .tr-new-r .btn { flex: 1; justify-content: center; }
  .tr-al-tbl .tr-st { white-space: normal; }
  .tr-al-tbl .tr-st small { display: block; }
  .tr-acts .tr-ex { flex-basis: 100%; }
}
@media (max-width: 560px) {
  .fam-note { font-size: 12.5px; line-height: 1.6; padding: 8px 10px; gap: 8px; }
  .fam-note small { font-size: 11.5px; }
  .fam-note img.ic { width: 26px; height: 26px; }
  /* اختيار القوات على الهاتف: الصورة والاسم الكامل في سطر والعدد تحتهما بعرض البطاقة (كان الاسم يُضغط تحت حقل العدد) */
  .tp { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 7px; padding: 6px 7px; }
  .tp img { width: 40px; height: 40px; }
  .tp .nm { overflow-wrap: anywhere; }
  .tp input { grid-column: 1 / -1; width: 100%; }
}

/* ============================================================ v3 fixes — بطاقة الحاكم تحت لوحة الموارد، التنبيهات بجانب اللوحة
   المثبّتة يساراً، لوحة الأحداث في الهاتف الأفقي، شريط الهدنة في نافذة الإرسال وصفوف الجيوش */
/* V3V-03: لوحة الموارد تطول بأسطر الحالة (الفائض، المجاعة): بطاقة الحاكم على الخريطة تبدأ تحتها بارتفاعها المقيس (--res-h من
   ui-hud.js؛ الافتراضي = الموضع القديم 286px)، وفي اللوحة المثبّتة يساراً تبدأ لوحة الأحداث تحت لوحة الموارد المزاحة */
@media (min-width: 901px) and (min-height: 501px) {
  #tile-panel { top: calc(18px + var(--res-h, 268px)); max-height: calc(100% - 142px - var(--res-h, 268px)); }
  #game.dock-l #events { max-height: calc(100% - 120px - var(--dock-top, 58px) - var(--res-h, 310px)); }
}
/* V3V-04: اللوحة المثبّتة يساراً تزيح لوحة الموارد إلى أعلى الوسط: التنبيهات في الجزء المكشوف يمينها (الموضع من ui-building.js) */
#toasts.dk-l .toast { max-width: var(--tw, 360px); }
/* V3V-10: الهاتف الأفقي — لوحة الأحداث تبدأ تحت وسام البطل (كان يختفي تحتها مع صفوف التدريب) */
@media (max-height: 500px) and (min-width: 561px) { #events { max-height: calc(100% - 232px); } }
/* V3V-05: نافذة الإرسال إلى طرف هدنة: السبب والشريط فوق الأنماط (أنماط العدوان معطّلة) */
.tr-why.tr-send { margin: 0 0 12px; font-size: 13px; }
.tr-why > .tr-pill { flex: none; }
/* V3V-08: شريط الهدنة في صفوف الجيوش (لوحة الأحداث) */
.ev .tx .tr-pill { margin-inline-start: 4px; vertical-align: -2px; }
.ev .tx small .tr-pill { margin-inline-start: 3px; }

/* ============================================================ v4 theme «الخشب الذهبي» (SPEC_V4 §11)
   The token block at the top of the file is «الياقوت الملكي» (:root, .theme-sapphire). This block redefines every token for
   «الخشب الذهبي»: rich walnut panels with a fine grain (SVG turbulence, one 520×260 tile), warm gold trim, copper-amber primary
   buttons, a garnet main button and warm lamp light instead of the blue glow. The class sits on <html> (index.php reads the
   choice from localStorage before the first paint; ui.js UI.applyTheme / UI.setTheme), and on any element that previews a theme
   (.theme-wood / .theme-sapphire: the picker cards). Rules below the token block only fix what a token cannot reach. */
html.theme-wood, .theme-wood {
  --night: #0e0905; --bg1: #1a100a; --bg2: #24160d;
  --sap: #5a3518; --sap2: #7a4a22; --sap3: #a8682e; --sap-glow: #e8a85a;
  --muted: #cbb48f; --muted2: #9c8466; --cream: #efdfc2; --ivory: #fbf1dd; --aqua: #f2c27a;
  --line: rgba(233, 196, 106, 0.5); --line-soft: rgba(232, 200, 150, 0.16);
  --rgb-well: 22, 13, 6; --rgb-deep: 38, 23, 11; --rgb-navy-lo: 56, 34, 17; --rgb-navy: 80, 49, 24;
  --rgb-sap: 118, 72, 33; --rgb-sap-hi: 166, 102, 46; --rgb-glow: 242, 178, 96; --rgb-hair: 232, 200, 150;
  --glass: linear-gradient(180deg, rgba(92, 57, 29, 0.95), rgba(46, 27, 13, 0.96));
  --glass-2: linear-gradient(180deg, rgba(108, 67, 33, 0.42), rgba(40, 24, 12, 0.55));
  --gem-hi: #9e6834; --gem-lo: #2c190b; --gem-hi2: #b4773a; --gem-lo2: #2a170a; --gem-mid: #4c2d14;
  --orb-1: #ae7138; --orb-2: #5c3518; --orb-3: #2a170a;
  --tab-1: #c9873f; --tab-2: #7c461a;
  --modal-1: #3f2716; --modal-2: #2a190d; --modal-3: #1b1007;
  --login-1: #2a1a10; --login-2: #170e08;
  --opt-bg: #2a190d; --mini-bg: #1e1209;
  --btn-1: #f3c07c; --btn-2: #b9722f; --btn-3: #6f3d15; --btn-b: #2e1606;
  --btn-off-filter: grayscale(0.85) brightness(0.72); --btn-off-op: 0.75; --btn-off-ring: rgba(233, 196, 106, 0.25); --btn-off-gloss: 1;
  --tint: #f6e2c2; --tint2: #f0d2a4; --tint3: #e9b979;
  --bar-1: #c47a32; --bar-2: #f2d08a;
  --bub-1: #a06634; --bub-2: #6b3e18;
  --knob-1: #f3e6cc; --knob-2: #b09670; --off: #7a6450;
  --main-1: #f08a66; --main-2: #9a2c1e; --main-3: #440f08;
  --ridge-1: #4d2e17; --ridge-2: #1d1108; --ridge-3: #2e1b0d; --ridge-4: #0e0905; --ridge-5: #2a180b;
  --prot-bg: rgba(30, 78, 66, 0.62); --prot-line: rgba(140, 214, 184, 0.55); --prot-fg: #d6f3e4;   /* verdigris shield on walnut */
  --tex-wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='260'%3E%3Cfilter id='d' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.11' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.05 0 0 0 0 0.02 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .55 0 .35 0 .6 0 .3 0 .5 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cfilter id='l' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.14' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.85 0 0 0 0 0.6 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 .5 0 0 .4 0 0 .45 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='520' height='260' filter='url(%23d)' opacity='0.55'/%3E%3Crect width='520' height='260' filter='url(%23l)' opacity='0.1'/%3E%3C/svg%3E");
  --tex-wood-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='260'%3E%3Cfilter id='d' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.11' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.05 0 0 0 0 0.02 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .55 0 .35 0 .6 0 .3 0 .5 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cfilter id='l' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.14' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.85 0 0 0 0 0.6 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 .5 0 0 .4 0 0 .45 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='520' height='260' filter='url(%23d)' opacity='0.36'/%3E%3Crect width='520' height='260' filter='url(%23l)' opacity='0.07'/%3E%3C/svg%3E");
  --tex-panel: var(--tex-wood) 0 0 / 520px 260px;
  --tex-sky: var(--tex-wood-soft);
  --tex-sky-size: 520px 260px;
  --orn-dia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='14' viewBox='0 0 30 14'%3E%3Cpath d='M15 1l6 6-6 6-6-6z' fill='%23f0cf7a'/%3E%3Cpath d='M15 4l3 3-3 3-3-3z' fill='%235a3417'/%3E%3Ccircle cx='4' cy='7' r='1.6' fill='%23f0cf7a'/%3E%3Ccircle cx='26' cy='7' r='1.6' fill='%23f0cf7a'/%3E%3C/svg%3E");
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  /* v5 §8: the canvas chrome stays the v4 navy in wood (as before v5) */
  --cv-ink: 8, 14, 40; --cv-label: 8, 12, 30; --cv-group: 26, 44, 102; --cv-edge: 6, 9, 22; --cv-well: 3, 7, 22;
  --cv-bar: 6, 10, 30; --cv-tick: 12, 22, 64; --cv-ring: 8, 13, 36; --cv-badge: #0c1640; --cv-sign: #3a63c9;
}
/* surfaces that are not .panel get the grain too */
html.theme-wood .auth-box, html.theme-wood .tribe-card, html.theme-wood #side-icons.open, html.theme-wood .toast:not(.err):not(.medal) { background: var(--tex-panel), var(--glass); }
/* panels: carved bevel — warm top light, dark inner edge, shade at the foot */
html.theme-wood .panel { box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 226, 170, 0.16), inset 0 0 0 1px rgba(20, 10, 4, 0.6), inset 0 -12px 20px rgba(0, 0, 0, 0.16); }
html.theme-wood .modal { border-color: rgba(240, 207, 122, 0.85); }
html.theme-wood .modal::before { opacity: 0.04; }
html.theme-wood .modal-h { border-bottom: 1px solid rgba(20, 10, 4, 0.5); }
/* gold-leaf headings read better a touch warmer on walnut */
html.theme-wood .sec h4, html.theme-wood .modal h4, html.theme-wood .modal-h h2 { text-shadow: 0 2px 0 rgba(20, 10, 4, 0.8), 0 0 16px rgba(233, 196, 106, 0.22); }
/* the login: a warm dusk sky (stars kept), walnut cards, ember glow behind the crest */
html.theme-wood #login {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 168, 82, 0.2), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(233, 196, 106, 0.18), transparent 70%),
    var(--tex-stars) 0 0 / 240px 240px,
    linear-gradient(180deg, var(--login-1) 0%, var(--login-2) 55%, var(--night) 100%);
}
html.theme-wood #loading { background: radial-gradient(ellipse at 50% 40%, rgba(255, 168, 82, 0.2), transparent 60%), var(--tex-stars) 0 0 / 240px 240px, var(--night); }
/* the player card on the map (ui-mapcard.js injects literal sapphire colours): the same rules on theme tokens, one step more specific */
html .pcard .pc-rank { background: radial-gradient(circle at 38% 32%, var(--gem-hi2), var(--gem-lo2) 72%); box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px rgba(var(--rgb-deep), 0.9), 0 6px 16px rgba(0, 0, 0, 0.55); }
html .pcard .pc-bar { background: rgba(var(--rgb-well), 0.6); }
html .pcard .pc-vil { background: linear-gradient(180deg, rgba(var(--rgb-sap), 0.3), rgba(var(--rgb-well), 0.45)); }
html .pcard .pc-mstrip { background: rgba(var(--rgb-well), 0.35); }
html .pcard .pc-atk li { background: rgba(var(--rgb-well), 0.42); border-color: rgba(var(--rgb-hair), 0.12); border-inline-start-color: rgba(var(--rgb-hair), 0.3); }
html .pcard .pc-atk li.win { border-inline-start-color: var(--emerald); }
html .pcard .pc-atk li.lose { border-inline-start-color: var(--ruby); }
html .pcard .pc-none { background: rgba(var(--rgb-well), 0.35); border-color: rgba(var(--rgb-hair), 0.2); }

/* ============================================================ v5 theme «العقيق الأسود» (SPEC_V5 §8)
   «الياقوت الملكي» with every blue chrome colour replaced by a neutral black of about the same lightness (relative luminance matched,
   the table in docs/API_V2.md «v5 — theme»). Everything else is the sapphire look: the star texture under the dialogs / login / loading
   (--tex-sky = --tex-stars), the gold frames, corner flourishes and gold text, the gems and the semantic colours (ruby, emerald, the
   amethyst map button, aqua, the protection chip); the blue glow becomes a soft silver-grey one and the inner diamond of the divider a
   dark neutral. Every token is redefined (--tex-panel / --tex-sky / --tex-sky-size reset to the sapphire ones) so the preview card is
   right inside a wood page too. No rule of its own: the sapphire rules on these tokens are the whole theme. */
html.theme-onyx, .theme-onyx {
  --night: #090909; --bg1: #121212; --bg2: #1c1c1c;
  --sap: #303030; --sap2: #454545; --sap3: #696969; --sap-glow: #919191;
  --muted: #b0b0b0; --muted2: #838383; --cream: #e8dcc0; --ivory: #f6eedb; --aqua: #7fe3ff;
  --line: rgba(233, 196, 106, 0.42); --line-soft: rgba(var(--rgb-hair), 0.16);
  --rgb-well: 8, 8, 8; --rgb-deep: 18, 18, 18; --rgb-navy-lo: 31, 31, 31; --rgb-navy: 44, 44, 44;
  --rgb-sap: 69, 69, 69; --rgb-sap-hi: 108, 108, 108; --rgb-glow: 145, 145, 145; --rgb-hair: 184, 184, 184;
  --glass: linear-gradient(180deg, rgba(44, 44, 44, 0.9), rgba(18, 18, 18, 0.93));
  --glass-2: linear-gradient(180deg, rgba(56, 56, 56, 0.55), rgba(24, 24, 24, 0.6));
  --gem-hi: #555555; --gem-lo: #1e1e1e; --gem-hi2: #696969; --gem-lo2: #1a1a1a; --gem-mid: #282828;
  --orb-1: #5e5e5e; --orb-2: #2b2b2b; --orb-3: #171717;
  --tab-1: #6c6c6c; --tab-2: #414141;
  --modal-1: #232323; --modal-2: #151515; --modal-3: #101010;
  --login-1: #171717; --login-2: #0e0e0e;
  --opt-bg: #191919; --mini-bg: #161616;
  --btn-1: #9e9e9e; --btn-2: #676767; --btn-3: #424242; --btn-b: #1f1f1f;
  /* UI5-07: the primary gem is already silver-grey, so the grayscale dim alone changed only its brightness — a disabled button here is a
     dark charcoal plate without the gold ring and the gloss, clearly apart from the bright silver gem */
  --btn-off-filter: grayscale(0.85) brightness(0.5); --btn-off-op: 0.85; --btn-off-ring: transparent; --btn-off-gloss: 0;
  --tint: #dfdfdf; --tint2: #cccccc; --tint3: #b4b4b4;
  --bar-1: #878787; --bar-2: #cbcbcb;
  --bub-1: #797979; --bub-2: #4d4d4d;
  --knob-1: #d8d8d8; --knob-2: #969696; --off: #656565;
  --main-1: #9a6cf5; --main-2: #4a1f8a; --main-3: #220c48;
  --ridge-1: #343434; --ridge-2: #141414; --ridge-3: #202020; --ridge-4: #090909; --ridge-5: #1b1b1b;
  --prot-bg: rgba(20, 60, 110, 0.5); --prot-line: rgba(127, 227, 255, 0.55); --prot-fg: #c9f1ff;
  --tex-panel: none;
  --tex-sky: var(--tex-stars);
  --tex-sky-size: 240px 240px;
  --orn-dia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='14' viewBox='0 0 30 14'%3E%3Cpath d='M15 1l6 6-6 6-6-6z' fill='%23f0cf7a'/%3E%3Cpath d='M15 4l3 3-3 3-3-3z' fill='%23303030'/%3E%3Ccircle cx='4' cy='7' r='1.6' fill='%23f0cf7a'/%3E%3Ccircle cx='26' cy='7' r='1.6' fill='%23f0cf7a'/%3E%3C/svg%3E");
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  --cv-ink: 16, 16, 16; --cv-label: 13, 13, 13; --cv-group: 48, 48, 48; --cv-edge: 10, 10, 10; --cv-well: 8, 8, 8;
  --cv-bar: 11, 11, 11; --cv-tick: 26, 26, 26; --cv-ring: 15, 15, 15; --cv-badge: #1a1a1a; --cv-sign: #696969;
}

/* ============================================================ v4 UI — لون الواجهة (بطاقات المعاينة والنافذة الأولى)، الحساب، الموسم،
   الألقاب، الوكلاء (ui-account.js / ui-season.js / ui-sitters.js). ألوان الأقسام كلها من رموز السمة أعلاه. */
/* ---------- بطاقات معاينة اللون: نسخة مصغّرة من الواجهة الحقيقية (440×250 مصغّرة بـ --k) داخل صنف لونها */
/* v5 §8: three colours — three cards across on a desktop (the first-start box and the Settings window), stacked on a phone */
.th-cards { --k: 0.62; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 6px 0 4px; }
.th-cards.sm { --k: 0.36; gap: 8px; }
.th-card { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; cursor: pointer; text-align: start; font: inherit; color: var(--ivory);
  border-radius: 18px; border: 2px solid rgba(233, 196, 106, 0.32); background: var(--night); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); transition: transform .15s, border-color .15s, box-shadow .15s; }
.th-card:hover { transform: translateY(-2px); border-color: rgba(240, 207, 122, 0.7); }
.th-card.on { border-color: var(--gold-hi); box-shadow: 0 0 0 2px rgba(233, 196, 106, 0.55), 0 0 30px rgba(233, 196, 106, 0.32), 0 8px 22px rgba(0, 0, 0, 0.45); }
.th-card:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.th-stage { position: relative; display: block; width: 440px; height: 270px; flex: none; transform: scale(var(--k)); transform-origin: top right; margin-bottom: calc(270px * (var(--k) - 1)); margin-inline-end: calc(440px * (var(--k) - 1)); pointer-events: none; }
.th-stage > * { position: absolute; }
.th-land { inset: 0; background: radial-gradient(circle at 46% 58%, #8a6a44 0 30px, #6e5232 31px 44px, transparent 45px),
  /* VIS4-12: a small isometric lake (sand shore, deep centre, a glint) instead of a flat blue disc */
  radial-gradient(ellipse 16px 6px at 17% 78%, rgba(255, 255, 255, 0.5), transparent 70%),
  radial-gradient(ellipse 58px 27px at 20% 80%, #3f86b4 0 45%, #5aa3c9 70%, #9fcbd8 82%, #cdb983 86%, #b39a63 92%, transparent 96%),
  repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 10px, transparent 10px 20px), linear-gradient(180deg, #86ad5a, #5f8a3a 60%, #4b7330); }
.th-top { top: 8px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: 16px; display: flex; align-items: center; }
.th-vn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--title); font-size: 20px; white-space: nowrap; background: linear-gradient(180deg, #fff3c8, #e9c46a 60%, #c4923a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.th-res { top: 8px; left: 8px; width: 132px; padding: 6px; display: flex; flex-direction: column; gap: 4px; direction: ltr; }
.th-res .res { padding: 2px 8px 5px 3px; }
.th-res .res .val { font-size: 14px; }
.th-side { top: 8px; right: 8px; display: grid; gap: 6px; }
.th-stage .th-dlg { left: 150px; right: auto; top: 52px; width: 228px !important; max-height: none; transform: none; animation: none; border-radius: 16px; }
.th-stage .th-dlg .modal-h { padding: 8px 12px 9px; gap: 8px; }
.th-stage .th-dlg .modal-h .medal { width: 38px; height: 38px; }
.th-stage .th-dlg .modal-h .medal img { width: 30px; height: 30px; }
.th-h2 { font-family: var(--title); font-size: 18px; color: var(--gold); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7); white-space: nowrap; }
.th-stage .modal-tabs { padding: 10px 8px 4px; gap: 4px; flex-wrap: nowrap; }
.th-tab { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--muted); background: rgba(var(--rgb-well), 0.45); border: 1px solid rgba(var(--rgb-hair), 0.22); white-space: nowrap; }
.th-tab.on { color: #fff; background: linear-gradient(180deg, var(--tab-1), var(--tab-2)); border-color: rgba(240, 207, 122, 0.9); box-shadow: 0 0 14px rgba(var(--rgb-glow), 0.4); }
.th-body { display: flex; gap: 6px; padding: 8px 10px 12px; }
.th-body .btn { padding: 5px 10px; min-height: 30px; font-size: 12.5px; flex: 1; }
.th-dock { bottom: 6px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: flex-end; padding: 5px 14px 5px; border-radius: 22px; }
.th-dock .act .circ { width: 40px; height: 40px; border-width: 1.5px; }
.th-dock .act .circ img.ic { width: 27px; height: 27px; }
.th-dock .act.main .circ { width: 50px; height: 50px; }
.th-dock .act.main .circ img.ic { width: 34px; height: 34px; }
.th-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 9px 12px 11px; background: var(--tex-panel), var(--glass); border-top: 1px solid var(--line); }
.th-name b { font-family: var(--title); font-size: 18px; font-weight: 700; color: var(--gold-hi); }
.th-name small { flex-basis: 100%; font-size: 11.5px; color: var(--muted); }
.th-cards.sm .th-name b { font-size: 15.5px; }
/* UI5-08: the name strip fills its card to the bottom, so the strips of one row line up whatever their text (a selected card shows a
   check icon, a subtitle may take two lines), and the title stays beside its icon (it wraps inside itself, never under the icon) */
.th-name { flex: 1 0 auto; align-content: flex-start; }
.th-name b { flex: 1 1 0; min-width: 0; }
@media (min-width: 561px) and (max-width: 760px) {   /* UI5-08: small windows and tablets in portrait — 2 + 1 cards, not three squeezed ones */
  .th-cards:not(.sm) { --k: 0.53; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-cards:not(.sm) > .th-card:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
}
@media (min-width: 661px) and (max-width: 760px) { .th-cards:not(.sm) { --k: 0.64; } }
@media (min-width: 561px) {   /* v5 §8: three small cards side by side in the Settings window (one line per subtitle) */
  .th-cards.sm .th-name { padding: 8px 9px 10px; gap: 3px 6px; }
  .th-cards.sm .th-name small { font-size: 10.5px; }
}
@media (max-width: 560px) {
  .th-cards { grid-template-columns: 1fr; --k: 0.72; }
  .th-cards.sm { --k: 0.72; }
}
/* النافذة الأولى بعد التسجيل (فوق شاشة الدخول) */
.tp-ov { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 16px; overflow-y: auto; background: radial-gradient(ellipse at 50% 30%, rgba(var(--rgb-deep), 0.55), rgba(0, 0, 0, 0.82)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade .2s; }
/* v5 §8: wide enough for three cards; centred by auto margins, so a box taller than the screen (phone) scrolls from its top */
.tp-box { width: min(940px, 100%); padding: 22px 24px 20px; border-radius: 22px; align-self: start; margin: auto 0; }
.tp-box > *:not(.orn) { position: relative; z-index: 2; }
.tp-h { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.tp-h h2 { margin: 0; font-family: var(--title); font-size: 28px; color: var(--gold); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7), 0 0 18px rgba(233, 196, 106, 0.25); }
.tp-h .lead { margin: 2px 0 0; line-height: 1.7; }
.tp-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.tp-foot .lead { flex: 1 1 200px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.tp-foot .btn.big { width: auto; flex: 0 1 auto; }
@media (max-width: 560px) { .tp-box { padding: 16px 14px; } .tp-h h2 { font-size: 23px; } .tp-foot .btn.big { width: 100%; } }
/* v5 §8: the three stacked cards are taller than a phone screen — «ابدأ» stays on the screen (sticky foot over the cards) */
@media (max-width: 560px) {
  .tp-box > .tp-foot { position: sticky; bottom: -16px; z-index: 3; gap: 8px; margin: 10px -14px -16px; padding: 26px 14px 16px; border-radius: 0 0 22px 22px;
    background: linear-gradient(180deg, rgba(var(--rgb-deep), 0), rgba(var(--rgb-deep), 0.97) 22px); }
  .tp-box > .tp-foot .lead { font-size: 12px; }
}
.set-theme h4 { font-size: 17px; }
.sit-why { display: flex; gap: 9px; align-items: flex-start; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.7; color: var(--cream);
  background: linear-gradient(var(--ang90), rgba(164, 108, 245, 0.2), rgba(var(--rgb-well), 0.4)); border: 1px dashed rgba(164, 108, 245, 0.55); }
.sit-why > img.ic { flex: none; margin-top: 2px; }

/* ---------- §6 التسجيل بالبريد، الحساب، رصيد الجوائز */
.field .f-hint { display: flex; gap: 5px; align-items: flex-start; font-size: 11.5px; font-weight: 600; line-height: 1.6; color: var(--muted); }
.field .f-hint img.ic { margin-top: 2px; }
.field.bad input { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(255, 90, 110, 0.22), inset 0 2px 6px rgba(0, 0, 0, 0.35); }
#auth-form input[type="email"] { text-align: left; }
.acc-sec h4 small { font-family: var(--font); font-size: 12.5px; }
.acc-row { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 14px; background: rgba(var(--rgb-well), 0.42); border: 1px solid rgba(63, 211, 154, 0.4); }
.acc-mail { font-weight: 900; font-size: 15px; color: var(--ivory); letter-spacing: .2px; }
.acc-row .lead { font-size: 12px; }
.acc-add { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; margin-bottom: 10px; border-radius: 14px; background: linear-gradient(var(--ang90), rgba(233, 196, 106, 0.16), rgba(var(--rgb-well), 0.4)); border: 1px solid rgba(233, 196, 106, 0.5); }
.acc-add b { font-size: 15px; color: var(--gold-hi); }
.acc-add .lead { font-size: 12.5px; line-height: 1.75; margin-top: 2px; }
.acc-pend { display: flex; gap: 6px; align-items: center; margin-top: 6px; font-size: 12.5px; font-weight: 800; color: var(--gold-hi); }
.acc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; align-items: end; }
.acc-form .err, .acc-form .btn { grid-column: 1 / -1; }
.acc-form .btn { justify-self: end; }
.acc-form input[type="email"] { text-align: left; }
.acc-names { display: flex; flex-wrap: wrap; gap: 6px; }
.acc-name { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; padding-inline: 12px 8px; border-radius: 12px; background: rgba(var(--rgb-well), 0.42); border: 1px solid rgba(var(--rgb-hair), 0.2); font-weight: 800; }
.acc-name.here { border-color: rgba(233, 196, 106, 0.6); }
.acc-name small { font-size: 11px; color: var(--muted); font-weight: 700; }
.acc-note { font-size: 12px; margin-top: 8px; }
.acc-credit { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-radius: 16px; background: radial-gradient(circle at 8% 50%, rgba(233, 196, 106, 0.22), transparent 55%), var(--glass-2); border: 1px solid rgba(233, 196, 106, 0.55); }
.acc-credit .ac-bal { display: flex; align-items: center; gap: 8px; }
.acc-credit .ac-bal b { display: block; font-size: 26px; font-weight: 900; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.acc-credit .ac-bal small { font-size: 11px; color: var(--muted); }
.acc-credit .grow { flex: 1 1 220px; font-size: 12.5px; line-height: 1.75; }
.acc-pend-t { display: inline-flex; gap: 5px; align-items: center; color: var(--gold-hi); }
.acc-ledger { margin-top: 10px; }
.acc-ledger .num.pos { color: var(--ok); }
.acc-ledger .num.neg { color: var(--bad); }
@media (max-width: 560px) { .acc-form { grid-template-columns: 1fr; } }
.tr-bal .tr-credit { border-color: rgba(233, 196, 106, 0.65); background: radial-gradient(circle at 50% 30%, rgba(233, 196, 106, 0.22), rgba(var(--rgb-well), 0.5) 70%); }
.tr-bal .tr-credit b { color: var(--gold-hi); }
.tr-bal .tr-credit.off { opacity: .72; }
.cr-note { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0 4px; padding: 8px 12px; border-radius: 14px; background: linear-gradient(var(--ang90), rgba(233, 196, 106, 0.14), rgba(var(--rgb-well), 0.4)); border: 1px dashed rgba(233, 196, 106, 0.55); }
.cr-note .grow { flex: 1 1 200px; }
.cr-note b { color: var(--gold-hi); }
.cr-note .lead { font-size: 12px; }
.pk-credit { width: 100%; margin-top: 4px; }
.pk-credit.off { opacity: .6; cursor: not-allowed; }
.pk-why { display: block; margin-top: 2px; font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.5; }
/* ---------- SEC-01: البريد «مؤكد» / «بانتظار التأكيد» وصندوق رمز التأكيد (تبويب «حسابي» ونافذة «أكّد بريدك») */
.acc-row.wait { border-color: rgba(255, 176, 72, 0.55); background: linear-gradient(var(--ang90), rgba(255, 176, 72, 0.12), rgba(var(--rgb-well), 0.42)); }
.acc-row.wait > img.ic { opacity: .95; }
.acc-mrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.acc-st.wait { background: rgba(255, 176, 72, 0.16); color: #ffc878; border-color: rgba(255, 176, 72, 0.55); }
.acc-verify { margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: radial-gradient(circle at 92% 0%, rgba(233, 196, 106, 0.16), transparent 60%), var(--glass-2); border: 1px solid rgba(233, 196, 106, 0.55); }
.av-h { display: flex; gap: 10px; align-items: flex-start; }
.av-h b { font-size: 15.5px; color: var(--gold-hi); }
.av-h .lead { font-size: 12.5px; line-height: 1.75; margin-top: 2px; }
.av-warn { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 8px 10px; border-radius: 12px; font-size: 12.5px; font-weight: 700; line-height: 1.7; color: #ffd6a0; background: rgba(255, 140, 60, 0.13); border: 1px solid rgba(255, 150, 70, 0.5); }
.av-warn img.ic { flex: none; margin-top: 1px; }
.av-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.av-form .field { flex: 1 1 170px; margin-bottom: 0; }
.av-form .btn { flex: none; }
.field input.av-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: 800; letter-spacing: 8px; text-align: center; direction: ltr; padding-inline: 10px; }
.field input.av-code::placeholder { letter-spacing: 8px; color: rgba(var(--rgb-hair), 0.35); }
.av-err { margin-top: 6px; line-height: 1.6; }
.av-err:empty { min-height: 0; margin-top: 0; }
.av-foot { display: flex; gap: 6px 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.av-foot .lead { flex: 1 1 200px; font-size: 11.5px; line-height: 1.6; }
.av-foot .btn[disabled] { opacity: .65; cursor: default; }
/* VERIFY-NOSEND-LEAD: the code was not sent — the failure line and «أعد إرسال الرمز» only (no field for a code that never came) */
.acc-verify.nosend .av-form, .acc-verify.nosend .av-foot .lead { display: none; }
.acc-verify.nosend .av-foot { margin-top: 10px; }
.acc-verify.nosend [data-av-send]:not([disabled]) { border-color: var(--gold-hi); color: var(--gold-hi); }
/* SEC-01-TEXT-PENDING-HOLD: the end of the name hold, under the lead of the code box (the prompt after registration) */
.av-h .av-hold { display: flex; gap: 5px; align-items: flex-start; margin-top: 4px; color: #ffc878; }
.av-h .av-hold img.ic { flex: none; margin-top: 3px; }
.acc-hold-t { font-weight: 800; color: var(--gold-hi); white-space: nowrap; }
.acc-verify.need-new [data-av-send]:not([disabled]) { border-color: var(--gold-hi); color: var(--gold-hi); box-shadow: 0 0 0 2px rgba(233, 196, 106, 0.35), 0 0 16px rgba(233, 196, 106, 0.3); }
.acc-fix { margin-top: 10px; }
.acc-fix summary { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; font-size: 12.5px; font-weight: 800; color: var(--muted); list-style: none; }
.acc-fix summary::-webkit-details-marker { display: none; }
.acc-fix[open] summary { color: var(--gold-hi); margin-bottom: 8px; }
.acc-wait { display: flex; gap: 6px; align-items: flex-start; }
.acc-shop-off { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.acc-shop-off .btn[disabled] { opacity: .6; cursor: not-allowed; }
.acc-shop-off small { font-size: 11px; }
.av-m .acc-verify { margin-top: 0; }
.av-later { justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.av-later .lead { font-size: 12px; display: inline-flex; gap: 5px; align-items: center; }
@media (max-width: 560px) {
  .av-form .btn { flex: 1 1 100%; }
  .field input.av-code { font-size: 22px; letter-spacing: 6px; }
}

/* ---------- v6 §3: شاشة «تأكيد البريد» قبل اللعبة (ui-gate.js) — بخلفية شاشة الدخول وبطاقة زجاجية بإطار ذهبي، والرمز كبيراً */
.gate {
  position: fixed; inset: 0; z-index: 30; overflow-y: auto; display: flex; justify-content: center; align-items: flex-start; padding: 7vh 16px 40px;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--rgb-glow), 0.28), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(233, 196, 106, 0.16), transparent 70%),
    var(--tex-sky) 0 0 / var(--tex-sky-size),
    linear-gradient(180deg, var(--login-1) 0%, var(--login-2) 55%, var(--night) 100%);
  animation: fade .25s;
}
.gate-box { position: relative; width: min(520px, 100%); padding: 24px 24px 20px; border-radius: 20px; background: var(--tex-panel), var(--glass); border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 40px rgba(var(--rgb-glow), 0.12); }
.gate-box > :not(.orn) { position: relative; z-index: 2; }
.gate-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.gate-head h2 { margin: 0; font-family: var(--title); font-size: 31px; line-height: 1.2; color: var(--gold-hi); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55); }
.gate-head .lead { margin: 2px 0 0; }
.gate-crest { width: 64px; height: 64px; filter: drop-shadow(0 0 16px rgba(233, 196, 106, 0.5)); }
.gate-mail { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px;
  background: radial-gradient(circle at 92% 0%, rgba(233, 196, 106, 0.16), transparent 60%), var(--glass-2); border: 1px solid rgba(233, 196, 106, 0.5); }
.gate-mail > img.ic { flex: none; }
.gate-mail b { display: block; font-size: 15.5px; line-height: 1.6; color: var(--ivory); }
.gate-mail .lead { font-size: 13px; line-height: 1.75; margin-top: 3px; }
.gate .acc-mail { color: var(--gold-hi); font-weight: 800; }
.gate-warn { margin-top: 10px; }
.gate-form { margin-top: 14px; }
.gate-form .field { margin-bottom: 10px; }
.gate-form .field input.av-code { font-size: 30px; letter-spacing: 12px; padding-block: 12px; }
.gate-err { line-height: 1.6; }
.gate-err:empty { min-height: 0; }
.gate-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gate-acts .btn { flex: 1 1 140px; }
.gate-acts [data-g-send] { flex-basis: 100%; }
.gate-acts .btn[disabled] { opacity: .65; cursor: default; }
.gate-email { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(var(--rgb-well), 0.45); border: 1px solid rgba(233, 196, 106, 0.3); }
.gate-email .lead { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 10px; font-size: 12.5px; line-height: 1.7; }
.gate-erow { justify-content: flex-end; }
.gate-tip { display: flex; gap: 6px; align-items: flex-start; margin: 14px 0 0; font-size: 12px; line-height: 1.7; }
.gate-tip img.ic, .gate-email .lead img.ic { flex: none; margin-top: 2px; }
/* لم يُرسل الرمز: لا حقل لرمز لم يصل، و«أعد إرسال الرمز» بارز؛ وكذلك بعد انتهاء صلاحيته أو محاولاته */
.gate.nosend .gate-mail { border-color: rgba(255, 150, 70, 0.6); }
.gate.nosend .gate-form { display: none; }
.gate.nosend [data-g-send]:not([disabled]), .gate.expired [data-g-send]:not([disabled]), .gate-box.need-new [data-g-send]:not([disabled]) {
  border-color: var(--gold-hi); color: var(--gold-hi); box-shadow: 0 0 0 2px rgba(233, 196, 106, 0.35), 0 0 16px rgba(233, 196, 106, 0.3); }
@media (max-width: 560px) {
  .gate { padding: 14px 12px 28px; }
  .gate-box { padding: 18px 16px 16px; border-radius: 16px; }
  .gate-head { gap: 10px; }
  .gate-head h2 { font-size: 25px; }
  .gate-crest { width: 50px; height: 50px; }
  .gate-form .field input.av-code { font-size: 26px; letter-spacing: 8px; }
  .gate-acts .btn { flex: 1 1 100%; }
}
/* ---------- v6 §3: «نسيت كلمة المرور؟» (تبويب «لدي مملكة» في شاشة الدخول) */
.fp-link { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px auto 0; padding: 4px 10px; border: 0; border-radius: 8px; background: transparent;
  color: var(--gold); font-weight: 700; font-size: 13.5px; cursor: pointer; }
.fp-link:hover { color: var(--gold-hi); text-decoration: underline; }
#login:not(.mode-login) .fp-link { display: none; }
.fp { position: relative; z-index: 2; }
.fp-h { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.fp-h > img.ic { flex: none; }
.fp-h b { font-family: var(--title); font-size: 19px; color: var(--gold-hi); }
.fp-h .lead { font-size: 13px; line-height: 1.75; margin-top: 2px; }
.fp-said { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: var(--glass-2); border: 1px solid rgba(233, 196, 106, 0.45); }
.fp-said > img.ic { flex: none; margin-top: 1px; }
.fp-said .lead { font-size: 13px; line-height: 1.7; color: var(--cream); }
.fp-foot { display: flex; gap: 6px 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.fp-foot .lead { flex: 1 1 200px; font-size: 11.5px; line-height: 1.6; }
.fp-foot .btn[disabled] { opacity: .65; cursor: default; }
.fp-back { width: 100%; margin-top: 12px; }

/* ---------- §2/§5 الألقاب «ملك …» / «صاحب …» بجانب الأسماء */
.ttl-chips { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-inline-start: 6px; vertical-align: middle; }
.ttl { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 4px; padding-inline: 8px 4px; border-radius: 999px; font-size: 11.5px; font-weight: 800; line-height: 1.5; white-space: nowrap; font-family: var(--font);
  color: var(--gold-hi); background: linear-gradient(180deg, rgba(233, 196, 106, 0.3), rgba(140, 100, 32, 0.26)); border: 1px solid rgba(240, 207, 122, 0.75); box-shadow: 0 0 8px rgba(233, 196, 106, 0.22); }
.ttl.throne { color: #ffe2b0; background: linear-gradient(180deg, rgba(210, 100, 40, 0.38), rgba(90, 30, 10, 0.4)); border-color: rgba(255, 180, 90, 0.8); }
.ttl-chips.c { gap: 1px; margin-inline-start: 3px; }
.ttl-chips.c .ttl { padding: 0; background: none; border: 0; box-shadow: none; }
.ttl-chips.c .ttl img.ic { filter: drop-shadow(0 0 4px rgba(233, 196, 106, 0.7)); }
/* OWN-04: the first title of a compact row is a short readable chip (icon + «ملك …», cut with an ellipsis); a tap shows them all */
.ttl-chips.c { cursor: pointer; flex-wrap: nowrap; max-width: 100%; }
.ttl-chips.c .ttl.has-t { padding: 0 6px 0 2px; padding-inline: 6px 2px; font-size: 10.5px; line-height: 1.45; min-width: 0;
  background: linear-gradient(180deg, rgba(233, 196, 106, 0.24), rgba(140, 100, 32, 0.2)); border: 1px solid rgba(240, 207, 122, 0.6); }
.ttl-chips.c .ttl.throne.has-t { background: linear-gradient(180deg, rgba(210, 100, 40, 0.32), rgba(90, 30, 10, 0.34)); border-color: rgba(255, 180, 90, 0.7); }
.ttl-chips.c .ttl-t { display: inline-block; max-width: 9.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.ttl-chips.c:focus-visible { outline: 1px solid var(--gold-hi); outline-offset: 1px; border-radius: 999px; }
@media (max-width: 560px) { .ttl-chips.c .ttl-t { max-width: 7.5em; } }
.prof-head .ttl-chips { margin: 2px 0 4px; }
.prof-head .ttl { font-size: 13px; padding: 2px 10px 2px 5px; padding-inline: 10px 5px; }
.pod .ttl-chips { margin-inline-start: 0; justify-content: center; }

/* ---------- §1/§5 شريط الموسم، تنبيه الحدث، لافتة الفائزين */
#season-bar { position: absolute; top: 62px; left: 50%; transform: translateX(-50%); z-index: 5; display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 10px; padding-inline: 12px 10px; border-radius: 14px;
  font: inherit; font-size: 12.5px; font-weight: 800; color: var(--cream); cursor: pointer; white-space: nowrap; max-width: calc(100% - 640px); }
#season-bar:hover { border-color: var(--gold); filter: brightness(1.08); }
#season-bar .sb-n { display: inline-flex; align-items: center; gap: 5px; color: var(--gold-hi); }
#season-bar .sb-next { display: inline-flex; align-items: center; gap: 5px; min-width: 0; padding-inline-start: 10px; border-inline-start: 1px solid rgba(233, 196, 106, 0.3); }
#season-bar .sb-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
#season-bar .sb-next b { color: var(--gold-hi); unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
#season-bar .sb-x { color: #ffc4cc; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline-start: 10px; border-inline-start: 1px solid rgba(255, 150, 165, 0.35); }
#season-bar .sb-n { min-width: 0; }
#season-bar .sb-n b small.sb-x { display: block; padding: 0; border: 0; font-size: 0.86em; font-weight: 700; line-height: 1.15; }
#season-bar.ended .sb-n b { line-height: 1.15; }
#season-bar .sb-hall { flex: none; }
.modal-tabs .tab-x { font-style: normal; }
/* VIS4-07: the season window on a phone — short tab labels, and the row wraps instead of hiding «قاعة المجد» off-screen */
@media (max-width: 560px) {
  .season-m .modal-tabs .tab-x { display: none; }
  .season-m .modal-tabs { flex-wrap: wrap; justify-content: center; overflow: visible; -webkit-mask-image: none; mask-image: none; gap: 4px; }
  .season-m .modal-tabs button { padding: 6px 9px; }
}
#season-bar .sb-hall { display: inline-grid; place-items: center; animation: glowPulse 2.4s ease-in-out infinite; border-radius: 50%; }
#season-bar.ended { border-color: rgba(255, 90, 110, 0.7); }
#season-bar.ended .sb-n { color: #ffd0d6; }
#season-banner { position: absolute; top: 100px; left: 50%; transform: translateX(-50%); z-index: 6; width: min(540px, calc(100% - 640px)); padding: 12px 14px 12px; border-radius: 18px; border-color: rgba(240, 207, 122, 0.85);
  box-shadow: var(--shadow), 0 0 40px rgba(233, 196, 106, 0.25); animation: fade .3s; }
#season-banner > *:not(.orn) { position: relative; z-index: 2; }
.wb-h { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.wb-h b { display: block; font-family: var(--title); font-size: 19px; font-weight: 700; color: var(--gold-hi); }
.wb-h small { font-size: 11.5px; color: var(--muted); }
.wb-list { display: flex; flex-direction: column; gap: 5px; }
.wb-w { display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 8px; padding-inline: 10px 8px; border-radius: 12px; background: linear-gradient(var(--ang90), rgba(233, 196, 106, 0.16), rgba(var(--rgb-well), 0.42)); border: 1px solid rgba(233, 196, 106, 0.4); }
.wb-w .grow { flex: 1; min-width: 0; }
.wb-name { display: block; font-size: 14.5px; color: var(--ivory); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-w small { display: block; font-size: 11.5px; color: var(--gold); }
.wb-prize { display: inline-flex; align-items: center; gap: 3px; font-weight: 900; color: var(--gold-hi); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wb-none { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); padding: 6px 4px; }
.wb-acts { justify-content: flex-end; margin-top: 8px; }
/* BANNER-HIDES-THRONE: فوق الخريطة في ×2 / ×5 / ×10 تنتقل اللافتة إلى شريط الموسم (ui-season.js stowed): أيقونة قاعة المجد تتوهج ومعها
   «الفائزون»، والضغط على الشريط يعيد اللافتة — فلا تغطي عرش الشمال وأسماء المعالم في أعلى الشاشة */
#season-bar .sb-win { flex: none; font-weight: 800; color: var(--gold-hi); margin-inline-start: -4px; }
.toast.season { border-color: rgba(240, 207, 122, 0.9); background: var(--tex-panel), var(--glass); color: var(--ivory); cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 26px rgba(233, 196, 106, 0.35); }
.toast.season img.ic { width: 36px; height: 36px; }
/* بعد نهاية الموسم: أزرار البناء والتدريب باهتة (الضغط يعرض السبب) */
html.season-ro #game .afford-btn, html.season-ro #game .btn.xl { filter: grayscale(0.85) brightness(0.78); }
@media (max-width: 1180px) { #season-bar { max-width: calc(100% - 600px); } #season-banner { width: min(520px, calc(100% - 580px)); } }
@media (max-width: 900px) and (min-height: 501px) {
  #season-bar { top: 86px; left: 196px; transform: none; max-width: calc(100% - 420px); }
  #season-banner { top: 124px; left: 196px; transform: none; width: auto; right: 226px; }
}
@media (max-width: 560px) {
  #season-bar { top: 126px; left: 74px; transform: none; max-width: calc(100% - 74px - 146px); padding: 3px 8px; gap: 6px; font-size: 11.5px; border-radius: 11px; }
  #season-bar .sb-next { padding-inline-start: 6px; }
  /* v5 §7: موسم بأيام من 4 أرقام أو هاتف ضيق (ui-season.js stack): اليوم والعدّ التنازلي صفّان، وأيقونة قاعة المجد بجانبهما */
  #season-bar.stack { display: inline-grid; grid-template-columns: auto auto; column-gap: 6px; row-gap: 1px; justify-items: start; padding: 3px 9px; line-height: 1.15; }
  #season-bar.stack .sb-n, #season-bar.stack .sb-next { grid-column: 1; }
  #season-bar.stack .sb-next { padding-inline-start: 0; border-inline-start: 0; }
  #season-bar.stack .sb-hall, #season-bar.stack .sb-win { grid-column: 2; grid-row: 1 / span 2; }
  #season-banner { top: 192px; left: 6px; right: 6px; width: auto; transform: none; padding: 10px 10px; }
  .wb-h b { font-size: 16.5px; }
  .wb-name { font-size: 13.5px; }
}
@media (max-height: 500px) and (min-width: 561px) {
  #season-bar { top: 62px; left: 6px; transform: none; max-width: 330px; padding: 3px 8px; font-size: 11.5px; }
  #season-banner { top: 92px; left: 6px; transform: none; width: 330px; max-height: calc(100% - 180px); overflow-y: auto; }
}
/* صفحة الدخول: لافتة الفائزين وإغلاق التسجيل */
#login-banner { order: 1; width: min(560px, 100%); margin: 0 auto 16px; display: flex; flex-direction: column; gap: 10px; }
.lb-card { position: relative; padding: 14px 16px; border-radius: 18px; background: var(--tex-panel), var(--glass); border: 1px solid rgba(240, 207, 122, 0.85); box-shadow: var(--shadow), 0 0 40px rgba(233, 196, 106, 0.22); }
.lb-card > *:not(.orn) { position: relative; z-index: 2; }
.lb-ended { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.7; color: #ffe0e4; background: linear-gradient(var(--ang90), rgba(150, 14, 40, 0.55), rgba(var(--rgb-well), 0.5)); border: 1px solid rgba(255, 90, 110, 0.6); }
.lb-ended b { color: #fff; }
.auth-tabs button:disabled { opacity: .45; cursor: not-allowed; }
.chip.ss-ended { border-color: rgba(255, 90, 110, 0.7); color: #ffd0d6; }
/* نافذة الموسم */
.modal.season-m .modal-b { padding-top: 14px; }
.ss-hero, .hall-hero { display: flex; gap: 18px; align-items: center; padding: 14px 18px; border-radius: 20px; margin-bottom: 10px;
  background: radial-gradient(circle at 10% 50%, rgba(233, 196, 106, 0.24), transparent 55%), linear-gradient(var(--ang90), rgba(var(--rgb-sap), 0.5), rgba(var(--rgb-deep), 0.55)); border: 1px solid rgba(233, 196, 106, 0.55); }
.ss-ins { width: 112px; height: 112px; flex: none; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 35%, var(--gem-hi2), var(--gem-lo2) 72%); box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px rgba(var(--rgb-deep), 0.9), 0 0 28px rgba(233, 196, 106, 0.3); }
.ss-k { font-size: 12.5px; color: var(--muted); font-weight: 800; }
.ss-t { font-family: var(--title); font-size: 27px; color: var(--gold-hi); line-height: 1.25; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); }
.ss-hero .gbar { height: 14px; max-width: 560px; }
.ss-meta { margin-top: 6px; }
.ss-meta b { unicode-bidi: isolate; }
.ss-end, .ss-right { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; margin-bottom: 10px; }
.ss-end { background: linear-gradient(var(--ang90), rgba(150, 14, 40, 0.42), rgba(var(--rgb-well), 0.45)); border: 1px solid rgba(255, 90, 110, 0.55); }
.ss-end .grow, .ss-right .grow { flex: 1 1 240px; min-width: 0; }
.ss-end b { color: #ffe0e4; }
.ss-right { background: linear-gradient(var(--ang90), rgba(120, 120, 130, 0.25), rgba(var(--rgb-well), 0.45)); border: 1px solid rgba(200, 200, 210, 0.35); }
.ss-right.open { border-color: rgba(255, 150, 80, 0.7); }
.ss-right b { color: var(--ivory); }
.ss-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ss-tl li { display: grid; grid-template-columns: 30px 1fr 52px auto; gap: 8px; align-items: center; padding: 5px 10px; border-radius: 10px; font-size: 13px; background: rgba(var(--rgb-well), 0.35); border: 1px solid transparent; }
.ss-tl li.done { opacity: .62; }
.ss-tl li.cur { border-color: rgba(240, 207, 122, 0.8); background: linear-gradient(var(--ang90), rgba(233, 196, 106, 0.2), rgba(var(--rgb-well), 0.4)); box-shadow: 0 0 14px rgba(233, 196, 106, 0.18); }
.ss-tl .tl-t { font-weight: 800; color: var(--ivory); min-width: 0; }
.ss-tl .tl-p { color: var(--muted); font-size: 11.5px; text-align: center; }
.ss-tl .tl-d { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.ss-tl .tl-d b { color: var(--gold-hi); unicode-bidi: isolate; }
.ss-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ss-log li { padding: 7px 11px; border-radius: 12px; background: rgba(var(--rgb-well), 0.35); border: 1px solid rgba(var(--rgb-hair), 0.14); font-size: 13px; line-height: 1.7; }
.ss-log li b { display: block; color: var(--gold-hi); }
.ss-log li small { display: block; color: var(--muted2); font-size: 11px; }
.sh-grid, .th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.sh-card, .thr-card { display: flex; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--glass-2); border: 1px solid rgba(var(--rgb-hair), 0.18); min-width: 0; }
.sh-card .grow, .thr-card .grow { flex: 1; min-width: 0; }
.sh-card.held, .thr-card.held { border-color: rgba(240, 207, 122, 0.7); background: radial-gradient(circle at 15% 20%, rgba(233, 196, 106, 0.18), transparent 60%), var(--glass-2); }
.sh-card.me { box-shadow: 0 0 0 2px rgba(63, 211, 154, 0.6), 0 0 18px rgba(63, 211, 154, 0.2); }
.sh-card.soon, .thr-card.soon { opacity: .72; }
.sh-art { width: 86px; height: 86px; flex: none; display: grid; place-items: center; border-radius: 14px; background: radial-gradient(circle at 50% 60%, rgba(var(--rgb-glow), 0.2), rgba(var(--rgb-well), 0.4) 70%); }
.sh-art img { width: 86px; height: 86px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55)); }
.sh-card.soon .sh-art img, .thr-card.soon .sh-art img { filter: grayscale(0.9) brightness(0.6); }
.sh-n { font-family: var(--title); font-size: 18px; color: var(--gold-hi); line-height: 1.3; }
.sh-b { font-size: 12.5px; font-weight: 800; color: var(--ok); display: flex; align-items: center; gap: 4px; }
.sh-l { font-size: 12px; line-height: 1.65; margin: 3px 0; }
.sh-s { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 12.5px; margin-top: 3px; }
.sh-s b[data-end] { unicode-bidi: isolate; color: var(--gold-hi); }
.sh-a { margin-top: 6px; }
.sh-h { margin-top: 6px; font-size: 12px; }
.sh-h summary { cursor: pointer; color: var(--gold); font-weight: 800; display: inline-flex; gap: 4px; align-items: center; }
.sh-h ol { margin: 4px 0 0; padding-inline-start: 20px; line-height: 1.7; }
.hall-hero .ss-t { font-size: 30px; }
.hall-hero .lead { font-size: 13px; line-height: 1.8; }
.hall-seasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.hs-card { padding: 10px 12px; border-radius: 16px; background: var(--glass-2); border: 1px solid rgba(233, 196, 106, 0.4); }
.hs-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.hs-h b { color: var(--gold-hi); }
@media (max-width: 560px) {
  .ss-hero, .hall-hero { flex-direction: column; text-align: center; padding: 12px; }
  .ss-hero .gbar { margin-inline: auto; }
  .ss-meta { justify-content: center; }
  .ss-ins { width: 86px; height: 86px; }
  .ss-ins img.ic { width: 70px; height: 70px; }
  .ss-t { font-size: 22px; }
  .ss-tl li { grid-template-columns: 26px 1fr auto; }
  .ss-tl .tl-p { display: none; }
  .sh-grid, .th-grid, .hall-seasons { grid-template-columns: 1fr; }
  .sh-art, .sh-art img { width: 64px; height: 64px; }
}

/* ---------- §7 الوكلاء: الشريط الثابت، نافذة الوكلاء */
#game { --sit-h: 0px; }
#game.acting { --sit-h: 40px; }
#sit-banner { position: absolute; top: 0; left: 0; right: 0; z-index: 7; height: 40px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 12px; font-size: 13.5px; font-weight: 800; color: #f1e4ff;
  background: linear-gradient(180deg, rgba(92, 44, 160, 0.96), rgba(46, 18, 96, 0.96)); border-bottom: 1px solid rgba(240, 207, 122, 0.85); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55); }
#sit-banner.ended { color: #ffe9c4; background: linear-gradient(180deg, rgba(140, 84, 12, 0.96), rgba(70, 38, 4, 0.96)); }
#sit-banner .sb-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sit-banner .sb-t b { color: var(--gold-hi); }
#sit-banner .sb-p { display: inline-flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
#sit-banner .sb-p .pill { font-size: 11px; }
#sit-banner .btn { flex: none; }
#game.acting :is(#top-bar, #res-panel, #hero-btn, #right-col, #season-bar, #season-banner, #tile-panel) { margin-top: var(--sit-h); }
body:has(#game.acting) #toasts { margin-top: 40px; }
#game.acting #modal-root .modal.dock.dk-side { top: calc(var(--dt, 10px) + var(--sit-h)); }
@media (max-width: 560px) {
  #game.acting #side-icons:not(.open) { margin-top: var(--sit-h); }
  #sit-banner { font-size: 12px; gap: 6px; padding: 0 8px; }
  #sit-banner .sb-p { display: none; }
  #sit-banner .btn { padding: 3px 8px; }
}
@media (max-width: 1180px) { #sit-banner .sb-p { display: none; } }
.ico-btn.sit-off { filter: grayscale(0.9) brightness(0.65); }
.ico-btn.sit-off::after { content: ''; position: absolute; inset: auto; bottom: 2px; inset-inline-start: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ruby); box-shadow: 0 0 0 2px rgba(var(--rgb-deep), 0.9); }
.sit-note { display: flex; gap: 6px; align-items: center; padding: 6px 9px; font-size: 12px; font-weight: 700; color: #e3ccff; border-top: 1px solid rgba(233, 196, 106, 0.18); }
.modal.sit-m { width: min(760px, calc(100% - 20px)); }
.sit-intro { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; margin-bottom: 10px; background: linear-gradient(var(--ang90), rgba(164, 108, 245, 0.22), rgba(var(--rgb-deep), 0.45)); border: 1px solid rgba(164, 108, 245, 0.5); }
.sit-intro .grow { flex: 1; min-width: 0; }
.sit-intro b { font-family: var(--title); font-size: 19px; color: var(--gold-hi); font-weight: 700; }
.sit-intro .lead { font-size: 12.5px; line-height: 1.8; margin-top: 2px; }
.sit-never { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; font-size: 12px; line-height: 1.65; color: #ffc4cc; }
.sit-never img.ic { flex: none; margin-top: 2px; }
.sit-list { display: flex; flex-direction: column; gap: 8px; }
.sit-card { padding: 9px 12px 10px; border-radius: 14px; background: var(--glass-2); border: 1px solid rgba(var(--rgb-hair), 0.18); }
.sit-card.cur { border-color: rgba(63, 211, 154, 0.7); box-shadow: 0 0 16px rgba(63, 211, 154, 0.18); }
.sit-card.off { opacity: .62; }
.sit-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sit-top b { font-size: 15px; }
.sit-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pill.sit-p { color: #e3ccff; background: rgba(164, 108, 245, 0.16); border-color: rgba(164, 108, 245, 0.5); }
.sit-perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 8px; }
.sit-sw { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--muted); text-align: start;
  background: rgba(var(--rgb-well), 0.45); border: 1px solid rgba(var(--rgb-hair), 0.2); transition: border-color .15s, color .15s; }
.sit-sw span { flex: 1; min-width: 0; }
.sit-sw .switch { transform: scale(.72); margin: -4px -6px; }
.sit-sw.on { color: var(--ivory); border-color: rgba(164, 108, 245, 0.65); background: linear-gradient(180deg, rgba(164, 108, 245, 0.2), rgba(var(--rgb-well), 0.45)); }
.sit-sw:disabled { opacity: .6; cursor: wait; }
/* VIS4-13: five permissions in one balanced row of tiles on wide screens (icon, label up to two centred lines, switch); on a phone
   two columns with the fifth across both */
@media (min-width: 900px) {
  .sit-perms { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sit-sw { flex-direction: column; justify-content: flex-start; text-align: center; gap: 4px; padding: 8px 6px 6px; line-height: 1.35; }
  .sit-sw span { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
  .sit-sw .switch { margin: -2px 0 -4px; }
}
@media (max-width: 560px) {
  .sit-perms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sit-perms .sit-sw:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.sit-add .search { width: 100%; }
.sit-k { margin: 8px 0 0; font-size: 12.5px; }
.sit-log td { vertical-align: top; }

/* ============================================================ v4 map — شريط المستويات ×1 ×2 ×5 ×10 بجانب أزرار التكبير، لوحات المعالم
   الكبرى (المعاقل، ممالك الرماد ومدنها، العروش، أوكار الوحوش)، قواعد نافذة الإرسال وتلميح النظرة العامة (ui-world.js / map.js).
   الألوان من رموز السمة (rgb-*) فتتبع «الياقوت الملكي» و«الخشب الذهبي». */
#zoom-views { position: absolute; right: calc(100% + 8px); bottom: 0; display: flex; flex-direction: column; gap: 2px; padding: 3px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(var(--rgb-navy), 0.94), rgba(var(--rgb-well), 0.94)); border: 1px solid var(--line); box-shadow: var(--shadow); direction: ltr; }
#zoom-views .zv-b { min-width: 42px; height: 31px; padding: 0 6px; border: 0; border-radius: 10px; background: transparent; color: var(--cream); font: 800 13.5px/1 var(--font); cursor: pointer; transition: background .15s, color .15s; }
#zoom-views .zv-b bdi { pointer-events: none; }
#zoom-views .zv-b:hover { background: rgba(var(--rgb-hair), 0.14); color: var(--ivory); }
#zoom-views .zv-b:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: -2px; }
#zoom-views .zv-b.on { background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-mid)); color: #2a1a04; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 6px rgba(0, 0, 0, 0.45); }
/* v5 §1: ×10 مخفي حين لا تحتاجه الممالك (يبقى الزر في الشريط بالسمة hidden) */
#zoom-views .zv-b[hidden] { display: none; }
@media (max-width: 900px) { #zoom-views { right: calc(100% + 6px); padding: 2px; border-radius: 12px; } #zoom-views .zv-b { min-width: 36px; height: 27px; font-size: 12.5px; border-radius: 9px; } }
/* لوحة المربع: المعالم الكبرى */
.lm-kind { padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--gold-hi); background: rgba(233, 196, 106, 0.14); border: 1px solid rgba(233, 196, 106, 0.4); }
.lm-sec { margin-top: 6px; }
.lm-lore { margin: 6px 0 9px; padding-inline-start: 9px; border-inline-start: 2px solid rgba(233, 196, 106, 0.5); font-size: 12.5px; line-height: 1.75; color: var(--cream); }
.lm-bonus { display: flex; gap: 9px; align-items: center; margin: 6px 0; padding: 8px 10px; border-radius: 12px; background: linear-gradient(180deg, rgba(233, 196, 106, 0.16), rgba(var(--rgb-well), 0.45)); border: 1px solid rgba(233, 196, 106, 0.45); }
.lm-bonus small { display: block; font-size: 11px; color: var(--muted); }
.lm-bonus b { display: block; color: var(--gold-hi); font-size: 13.5px; line-height: 1.5; }
.lm-holder { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 8px 0; padding: 6px 9px; border-radius: 10px; font-size: 13px; background: rgba(var(--rgb-well), 0.42); border: 1px solid rgba(var(--rgb-hair), 0.16); }
.lm-holder b { color: var(--ivory); }
.lm-holder small { margin-inline-start: auto; font-size: 11px; color: var(--muted); }
.lm-holder.none { color: var(--muted); }
.lm-h { display: flex; align-items: center; gap: 6px; margin: 11px 0 6px; font-family: var(--title); font-size: 14.5px; font-weight: 700; color: var(--gold); }
.lm-h::after { content: ''; flex: 1; height: 1px; background: linear-gradient(var(--ang270), rgba(233, 196, 106, 0.45), transparent); }
.lm-h small { font-family: var(--font); font-size: 11px; color: var(--muted); }
.lm-rules { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lm-rules li { display: flex; gap: 6px; align-items: flex-start; padding: 4px 8px; border-radius: 9px; font-size: 12.2px; line-height: 1.6; color: var(--cream); background: rgba(var(--rgb-well), 0.32); border-inline-start: 3px solid rgba(var(--rgb-hair), 0.3); }
.lm-rules li img.ic { margin-top: 2px; }
.lm-rules li.ok { border-inline-start-color: var(--emerald); }
.lm-rules li.bad { border-inline-start-color: var(--ruby); color: #ffc6cd; }
.lm-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.lm-hist li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 4px 8px; border-radius: 9px; font-size: 12px; background: rgba(var(--rgb-well), 0.36); }
.lm-hist .nm { min-width: 0; overflow-wrap: anywhere; }
.lm-hist .nm small { font-size: 11px; color: var(--muted); }
.lm-hist .tm { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.lm-none { padding: 6px 9px; border-radius: 9px; font-size: 12px; color: var(--muted); border: 1px dashed rgba(var(--rgb-hair), 0.22); }
.lm-note { display: flex; gap: 6px; align-items: center; margin: 6px 0; font-size: 12px; color: var(--muted); }
.lm-note b { color: var(--ivory); }
.lm-mon { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.lm-mon .u-chip b { font-size: 11.5px; }
/* تلميح النظرة العامة: «اضغط للاقتراب» */
.lm-tip-hint { display: flex; gap: 4px; align-items: center; margin-top: 3px; font-size: 11px; color: var(--gold-hi); }
/* نافذة الإرسال: سبب منع النمط المختار (ممالك الرماد، مدينة الرماد، شرط البطل للمعقل) أو تنبيه حد المعاقل */
.send-rule { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 8px 11px; border-radius: 12px; font-size: 13px; line-height: 1.65; color: #ffd5da;
  background: linear-gradient(180deg, rgba(224, 64, 90, 0.16), rgba(var(--rgb-well), 0.45)); border: 1px solid rgba(224, 64, 90, 0.45); }
.send-rule.warn { color: #ffe3b0; background: linear-gradient(180deg, rgba(255, 180, 58, 0.15), rgba(var(--rgb-well), 0.45)); border-color: rgba(255, 180, 58, 0.45); }
@media (max-width: 560px) { .lm-bonus b { font-size: 12.5px; } .lm-rules li { font-size: 11.8px; } }

/* ============================================================ v4 village — الأعمال العظمى في نافذة المبنى (SPEC_V4 §10)، دليل
   «الأعمال العظمى»، مظهر الحقول 30 / 50 (§9). ألوان السمة فقط (rgba(var(--rgb-*)) و var(--*))، فتعمل مع «الخشب الذهبي». */
.gw-box { margin-top: 10px; padding: 9px 11px; border-radius: 13px; background: linear-gradient(180deg, rgba(var(--rgb-sap), 0.32), rgba(var(--rgb-well), 0.5));
  border: 1px solid rgba(233, 196, 106, 0.38); display: flex; flex-direction: column; gap: 7px; }
.gw-head { display: flex; align-items: center; gap: 7px; font-family: var(--title); font-size: 14px; color: var(--gold); }
.gw-head .spacer { flex: 1; }
.gw-req, .gw-order, .gw-bonus { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; line-height: 1.65; color: var(--cream); }
.gw-req img.ic, .gw-order img.ic, .gw-bonus img.ic { margin-top: 2px; flex: none; }
.gw-order { padding: 6px 10px; border-radius: 10px; color: #ffe3b0; background: rgba(255, 180, 58, 0.12); border: 1px solid rgba(255, 180, 58, 0.42); margin-top: 8px; }
.gw-box .gw-order { margin-top: 0; }
.gw-bonus b { color: var(--gold-hi); }
.gw-bonus small { display: block; font-size: 11.5px; color: var(--muted); }
.gw-bonus small.gw-crn { display: flex; align-items: center; gap: 4px; color: var(--gold); font-weight: 700; }
.gw-bonus small.gw-crn img.ic { margin-top: 0; }
.gw-bonus.hidden-b b { letter-spacing: 0.5px; color: var(--tint3); }
.gw-bonus.rev { padding: 6px 10px; border-radius: 10px; background: rgba(233, 196, 106, 0.1); border: 1px solid rgba(233, 196, 106, 0.35); }
.gw-prog { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; }
.gw-prog .cc { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 12px; background: rgba(var(--rgb-well), 0.55); border: 1px solid rgba(var(--rgb-hair), 0.22); color: var(--cream); }
.gw-prog .cc.ok { border-color: rgba(63, 211, 154, 0.55); color: var(--ok); }
.up-card.gw-lock .gw-prog { margin: 8px 0 2px; }
.gw-lvls td.gw-q { color: var(--tint3); letter-spacing: 0.5px; }
.bld-card .pill.wrap { white-space: normal; text-align: start; line-height: 1.45; }
/* الدليل: بطاقة لكل عمل عظيم (الاسم والقصة والميزة المخفية أو المكشوفة) */
.gw-guide { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-top: 10px; }
.gw-card { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(var(--rgb-navy), 0.72), rgba(var(--rgb-deep), 0.82)); border: 1px solid rgba(var(--rgb-hair), 0.2); }
.gw-card.rev { border-color: rgba(233, 196, 106, 0.55); }
.gw-card .gw-b { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.gw-card .gw-ic { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--gem-hi2), var(--gem-lo2)); border: 2px solid rgba(233, 196, 106, 0.6); }
.gw-card .gw-ic img.ic { width: 44px; height: 44px; }
.gw-card .gw-n { position: absolute; bottom: -4px; inset-inline-start: -4px; min-width: 21px; height: 21px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 900; color: #2a1a04; background: linear-gradient(180deg, #f6d98a, #c99a3c); border: 1px solid #6a4a10; }
.gw-card h5 { margin: 0; font-family: var(--title); font-size: 15px; color: var(--gold); }
.gw-card .lore { font-size: 12.5px; line-height: 1.7; color: var(--cream); }
.gw-card .gw-bonus { font-size: 12.5px; }
.gw-card .gw-lv { font-size: 11.5px; color: var(--muted); }
.guide-jump { margin-inline-start: 6px; vertical-align: middle; }
.lair-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.lair-card { padding: 9px 11px; border-radius: 13px; background: rgba(var(--rgb-well), 0.42); border: 1px solid rgba(var(--rgb-hair), 0.2); }
.lair-card h5 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-family: var(--title); font-size: 14.5px; color: var(--gold); }
.lair-card .lead { font-size: 12.2px; }
.lair-card .lc-u { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lair-card .lc-u span { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--cream); }
.lair-card .lc-u img { width: 34px; height: 34px; }
@media (max-width: 560px) { .gw-guide, .lair-cards { grid-template-columns: 1fr; } .gw-card { grid-template-columns: 50px minmax(0, 1fr); } .gw-card .gw-ic { width: 50px; height: 50px; } .gw-card .gw-ic img.ic { width: 38px; height: 38px; } }

/* ============================================================ v6 — instant finish («الإنهاء الفوري», §7) + full-view building dialog (§8) */
/* أسعار الإنهاء الفوري: شريحة جوهرة بجانب كل بند (اللون البنفسجي لأزرار الجواهر .btn.gem)، و«إنهاء الكل» تحت مستويات المبنى */
.pill.gem-p { background: rgba(164, 108, 245, 0.16); color: #e6d2ff; border-color: rgba(164, 108, 245, 0.5); font-variant-numeric: tabular-nums; }
.btn.fin-now { flex: none; font-variant-numeric: tabular-nums; }
.fin-all-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding: 8px 10px; border-radius: 12px;
  background: rgba(164, 108, 245, 0.1); border: 1px dashed rgba(164, 108, 245, 0.45); }
.fin-all-row .lead { flex: 1 1 180px; margin: 0; font-size: 12.5px; display: flex; gap: 6px; align-items: center; line-height: 1.5; }
.fin-all-row .btn { flex: none; }
/* لوحة الأحداث (HUD): سعر كل بند بجانب اسمه (للعرض؛ نقرة الصف تفتح المبنى) */
#events .ev-gem { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: 5px; padding: 0 6px 0 4px; padding-inline: 6px 4px; border-radius: 999px; font-size: 10.5px;
  font-weight: 900; line-height: 15px; color: #e6d2ff; background: rgba(164, 108, 245, 0.2); border: 1px solid rgba(164, 108, 245, 0.5);
  vertical-align: 1px; white-space: nowrap; font-style: normal; }
#events .ev-gem b { color: #f1e4ff; font-weight: 900; }
#events .ev-gem img.ic { width: 13px; height: 13px; }
#events .tq-w .ev-gem { margin-inline-start: 4px; }

/* لوحة «الإنهاء الفوري» */
.modal.fin-m { width: min(1000px, calc(100% - 20px)); }
.fin-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; border-radius: 16px; background: var(--glass-2);
  border: 1px solid rgba(164, 108, 245, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.fin-top .lead { flex: 1 1 320px; margin: 0; font-size: 13px; line-height: 1.8; }
.fin-bal { display: flex; align-items: center; gap: 10px; flex: none; }
.fin-bal img.ic { width: 40px; height: 40px; filter: drop-shadow(0 0 8px rgba(164, 108, 245, 0.6)); }
.fin-bal b { display: block; font-size: 20px; font-weight: 900; color: #e6d2ff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fin-bal small { color: var(--muted); font-size: 12px; }
.fin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.fin-grid.one { grid-template-columns: minmax(0, 1fr); }
.fin-card { display: flex; flex-direction: column; min-width: 0; padding: 12px 14px 14px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(var(--rgb-sap), 0.34), rgba(var(--rgb-deep), 0.55)); border: 1px solid rgba(233, 196, 106, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.fin-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fin-h h4 { margin: 0; font-size: 18px; }
.fin-h .spacer { flex: 1; }
.fin-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; padding-inline-end: 2px; }
.fin-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 12px;
  background: rgba(var(--rgb-well), 0.42); border: 1px solid rgba(var(--rgb-hair), 0.16); cursor: pointer; transition: border-color .15s, background .15s; }
.fin-row:hover { border-color: rgba(233, 196, 106, 0.55); background: rgba(var(--rgb-glow), 0.1); }
.fin-row.fin-wait { opacity: 0.86; }
.fin-ic { width: 42px; height: 42px; display: grid; place-items: center; }
.fin-ic img { width: 42px; height: 42px; object-fit: contain; }
.fin-w { min-width: 0; display: block; line-height: 1.35; text-align: start; }
.fin-w b { display: block; color: var(--ivory); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-w small { display: block; color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-t .tm { font-weight: 900; direction: ltr; color: var(--gold-hi); font-size: 12.5px; white-space: nowrap; }
.fin-empty { display: flex; align-items: center; gap: 8px; padding: 14px 12px; border-radius: 12px; color: var(--muted); font-size: 13px;
  background: rgba(var(--rgb-well), 0.3); border: 1px dashed rgba(var(--rgb-hair), 0.25); }
.fin-go { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.btn.fin-big { width: 100%; min-height: 54px; font-size: 16.5px; border-radius: 14px; font-variant-numeric: tabular-nums; }
.btn.fin-big img.ic { width: 26px; height: 26px; }
.fin-why { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); justify-content: center; text-align: center; }
.fin-tbl { margin-top: 14px; border-radius: 14px; background: rgba(var(--rgb-well), 0.32); border: 1px solid rgba(var(--rgb-hair), 0.18); padding: 4px 12px; }
.fin-tbl summary { cursor: pointer; padding: 8px 0; font-weight: 800; color: var(--cream); display: flex; align-items: center; gap: 6px; list-style: none; }
.fin-tbl summary::-webkit-details-marker { display: none; }
.fin-tbl summary::after { content: ''; margin-inline-start: auto; width: 7px; height: 7px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.fin-tbl[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.fin-trs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; padding: 2px 0 12px; }
.fin-tr { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px; border-radius: 10px; font-size: 12.5px;
  background: rgba(var(--rgb-navy), 0.45); border: 1px solid rgba(var(--rgb-hair), 0.14); color: var(--cream); }
.fin-tr b { display: inline-flex; align-items: center; gap: 3px; color: #e6d2ff; font-variant-numeric: tabular-nums; }
.fin-tr b img.ic { width: 13px; height: 13px; }
@media (max-width: 720px) {
  .fin-grid { grid-template-columns: minmax(0, 1fr); }
  .fin-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .fin-row .fin-t { grid-column: 2; grid-row: 2; }
  .fin-row .gem-p { grid-column: 3; grid-row: 1 / span 2; }
  .fin-ic, .fin-ic img { width: 36px; height: 36px; }
  .fin-top .lead { font-size: 12.5px; }
  .fin-list { max-height: none; }
}

/* زر «عرض موسّع» / «عرض جانبي» في رأس نافذة المبنى */
.modal-h .bv-tog { flex: none; }
.modal-h .bv-tog img.ic { width: 18px; height: 18px; }
@media (max-width: 560px) { .modal-h .bv-tog > span { display: none; } .modal-h .bv-tog { padding: 4px 7px; } }

/* §8: العرض الموسّع — نافذة عريضة في الوسط (الحاسوب 1000 بكسل فأكثر)، المجسّم كبيراً في الأعلى بجانب بطاقة الترقية، ثم التبويبات
   والمحتوى نفسه أعرض: بطاقات التدريب والأبحاث شبكة، وقائمة التدريب الجارية فوقها ظاهرة */
.modal.bld-full { width: min(1200px, calc(100% - 24px)); height: min(920px, calc(100% - 24px)); max-height: none; }
@media (min-width: 1040px) { .modal.bld-full { min-width: 1000px; } }
.modal.bld-full .modal-b { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); column-gap: 20px; align-content: start; padding: 16px 22px 30px; }
.modal.bld-full .modal-b > * { grid-column: 1 / -1; min-width: 0; }
/* المجسّم في العمود الأول بطول الرأس كله، وفي الثاني: النوع والوصف والإحصاءات ثم القائمة الجارية وبطاقة الترقية (bld-hero / bld-id
   «شفافان» للشبكة: أبناؤهما بنود فيها) */
.modal.bld-full .modal-b { row-gap: 0; }
.modal.bld-full .modal-b > .bld-hero, .modal.bld-full .bld-hero > .bld-id { display: contents; }
.modal.bld-full .bld-hero > .pedestal { grid-column: 1; grid-row: 1 / span 12; align-self: center; margin-top: 4px; }
.modal.bld-full .bld-id > *, .modal.bld-full .modal-b > .sec:has(> .q-list > .q-item.bq), .modal.bld-full .modal-b > .up-card { grid-column: 2; min-width: 0; }
.modal.bld-full .bld-id > .kicker { margin: 6px 0 0; }
.modal.bld-full .bld-id > .lead:nth-child(2) { margin: 4px 0 2px; }
.modal.bld-full .bld-id > .stat-cards { margin-top: 8px; }
.modal.bld-full .modal-b > .sec:has(> .q-list > .q-item.bq) { margin-top: 12px; }
.modal.bld-full .modal-b > .sec-tabs { margin-top: 18px; }
.modal.bld-full .pedestal { height: 340px; }
.modal.bld-full .pedestal .bimg { width: 330px; height: 330px; margin-bottom: 26px; }
.modal.bld-full .pedestal .base { width: 310px; height: 80px; bottom: 10px; }
.modal.bld-full .pedestal .glow { width: 340px; height: 300px; }
.modal.bld-full .pedestal .rays { width: 400px; height: 400px; }
.modal.bld-full .pedestal .lock { width: 90px; height: 90px; }
.modal.bld-full .stat-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.modal.bld-full .up-card .uh h4 { font-size: 19px; }
/* المحتوى أعرض: شبكة بطاقات للتدريب والأبحاث والحدادة (والقائمة الجارية أولاً) */
.modal.bld-full .train-sec, .modal.bld-full .res-sec { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 12px; align-items: stretch; }
.modal.bld-full .train-sec > *, .modal.bld-full .res-sec > * { grid-column: 1 / -1; min-width: 0; }
.modal.bld-full .train-sec > .unit-row, .modal.bld-full .res-sec > .unit-row { grid-column: auto; margin-bottom: 0; grid-template-columns: 84px minmax(0, 1fr); align-content: start; }
.modal.bld-full .train-sec > .train-q { order: -1; }
.modal.bld-full .train-sec > .train-q h4 { margin-top: 0 !important; }
.modal.bld-full .train-sec > .train-q .q-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 8px; }
.modal.bld-full .unit-row .train-ctl { grid-column: 1 / -1; min-width: 0; flex-direction: row; flex-wrap: wrap; align-items: center; }
.modal.bld-full .unit-row .train-ctl > .stepper { flex: 1 1 150px; }
.modal.bld-full .unit-row .train-ctl > .btn { flex: 1 1 auto; }
.modal.bld-full .battle, .modal.bld-full .bld-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
/* الهاتف وما دون 1000 بكسل: عمود واحد؛ الهاتف ملء الشاشة */
@media (max-width: 900px) {
  .modal.bld-full .modal-b { grid-template-columns: minmax(0, 1fr); padding: 12px 14px 30px; }
  .modal.bld-full .bld-hero > .pedestal, .modal.bld-full .bld-id > *, .modal.bld-full .modal-b > .sec:has(> .q-list > .q-item.bq), .modal.bld-full .modal-b > .up-card { grid-column: 1; grid-row: auto; }
  .modal.bld-full .pedestal { height: 270px; }
  .modal.bld-full .pedestal .bimg { width: 260px; height: 260px; margin-bottom: 22px; }
  .modal.bld-full .pedestal .base { width: 240px; height: 62px; }
  .modal.bld-full .pedestal .glow { width: 260px; height: 230px; }
  .modal.bld-full .pedestal .rays { width: 300px; height: 300px; }
}
@media (max-width: 560px) {
  .modal.bld-full { left: 0; top: 0; transform: none; width: 100% !important; height: 100%; max-height: none; border-radius: 0; border-left: 0; border-right: 0; animation: fade .18s; }
  .modal.bld-full > .orn { display: none; }
  .modal.bld-full .modal-h { padding-top: max(10px, env(safe-area-inset-top)); }
  .modal.bld-full .pedestal { height: 236px; }
  .modal.bld-full .pedestal .bimg { width: 226px; height: 226px; margin-bottom: 20px; }
  .modal.bld-full .pedestal .base { width: 210px; height: 54px; }
  .modal.bld-full .pedestal .glow { width: 230px; height: 200px; }
  .modal.bld-full .pedestal .rays { width: 260px; height: 260px; }
  .modal.bld-full .stat-cards { grid-template-columns: 1fr 1fr; }
  .modal.bld-full .unit-row { grid-template-columns: 64px minmax(0, 1fr); }
  .modal.bld-full .unit-row img.u { width: 64px; height: 64px; }
}
.modal.bld-full .lvl-ring { inset-inline-start: calc(50% - 205px); top: 10px; }
@media (max-width: 900px) { .modal.bld-full .lvl-ring { inset-inline-start: calc(50% - 170px); } }
@media (max-width: 560px) { .modal.bld-full .lvl-ring { inset-inline-start: calc(50% - 150px); top: 4px; } }

/* ============================================================ v6 §9 مفتاح اللغة «العربية / English» */
/* شاشة الدخول (#lang-switch، أعلى الصفحة في طرفها) والإعدادات (.lang-switch.in-set بجانب لون الواجهة). الألوان من رموز اللون الحالي
   (الياقوت الملكي، الخشب الذهبي، العقيق الأسود) مثل .auth-tabs. كل زر باسم لغته وبلغتها (lang/dir على الزر). تمرير اتجاه الصفحة كلها
   (LTR) في مرحلة الدمج الأخيرة، لا هنا. */
.lang-switch { position: relative; z-index: 2; display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px;
  background: rgba(var(--rgb-well), 0.6); border: 1px solid rgba(233, 196, 106, 0.34); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.lang-switch button { min-width: 86px; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted);
  font: 800 14px/1.25 Cairo, sans-serif; cursor: pointer; transition: color .15s, background .15s; }
.lang-switch button:hover { color: var(--gold-hi); }
.lang-switch button.on { background: linear-gradient(180deg, var(--tab-1), var(--tab-2)); color: #fff; cursor: default;
  box-shadow: 0 0 0 1px rgba(233, 196, 106, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4); }
.lang-switch button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* على الشاشة الواسعة: في زاوية الصفحة (طرف السطر) فوق كل شيء، فلا يتحرك شيء من شاشة الدخول عن مكانه؛ وعلى الهاتف في أول الصفحة */
#lang-switch { position: absolute; top: 16px; inset-inline-end: 18px; }
.lang-switch.in-set { margin: 4px 0 8px; }
.set-lang h4 { font-size: 17px; }
.set-lang h4 .lead { font: 600 13px Cairo, sans-serif; }
@media (max-width: 560px) {
  #lang-switch { position: relative; top: auto; inset-inline-end: auto; align-self: flex-end; margin: -2px 0 10px; }
  .lang-switch button { min-width: 74px; padding: 6px 12px; font-size: 13.5px; }
}

/* ============================================================ v6 §9 الإنجليزية: اتجاه LTR وطول الكلمات */
/* (كل قاعدة هنا لـ html[dir="ltr"] وحده، فالعربية كما هي) — معاينة لون الواجهة تُصغَّر من زاوية بداية السطر كما في العربية */
html[dir="ltr"] .th-stage { transform-origin: top left; }
/* أسماء المباني الإنجليزية أطول: شرط المبنى في بطاقة «المباني» يلتف داخل البطاقة ولا يخرج منها */
html[dir="ltr"] .bld-card .reqs { min-width: 0; }
html[dir="ltr"] .bld-card .req { max-width: 100%; flex-wrap: wrap; white-space: normal; line-height: 1.3; }
/* الهاتف، الخريطة: شريط ×1 ×2 ×5 يقف فوق طرف قائمة الأحداث — في LTR يكون الوقت في ذلك الطرف، فتُفسح له القائمة */
@media (max-width: 560px) {
  html[dir="ltr"] #game:has(#zoom-views:not(.hidden)) #events { padding-inline-end: 44px; }
}
/* أزرار بنصوص إنجليزية أطول في مساحة ثابتة: أزرار لوحة الخانة (عمودان) وطرق الدفع في ملخص الطلب */
html[dir="ltr"] .acts .btn { padding-inline: 8px; gap: 4px; }
html[dir="ltr"] .pm-opt .btn { padding-inline: 10px; gap: 5px; }
/* أزرار الشاشات الضيقة («تأكيد البريد»، «نسيت كلمة المرور؟»، «الإنهاء الفوري»): النص الإنجليزي الأطول يلتف سطرين بدل أن يُقص */
html[dir="ltr"] :is(#gate, #forgot, .fin-go) .btn { white-space: normal; line-height: 1.25; text-align: center; }
@media (max-width: 560px) { html[dir="ltr"] .btn.xl { padding-inline: 12px; } html[dir="ltr"] .btn.xl .lbl { gap: 6px; } }
/* الهاتف، قائمة التقارير: العنوان الإنجليزي أطول (والنتيجة في آخره: «— defeat»، «— we held») فيلتف سطرين بدل أن يُقص بنقاط */
@media (max-width: 560px) {
  html[dir="ltr"] .rep .ti { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; overflow-wrap: anywhere; }
}