/* دیپلماسی + لیدربورد — styles for this area only (prefix dp-).
   Motion: transform/opacity only; no backdrop-filter, no animated shadows. */

/* ------------------------------------------------------------------ banner */
.dp-me {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; overflow: hidden;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--nation) 30%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(var(--sk-212e49, 33, 46, 73), 0.95), rgba(var(--sk-0e1525, 14, 21, 37), 0.96));
  border: 1px solid rgba(255, 255, 255, 0.07); border-top-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 24px rgba(var(--sk-000000, 0, 0, 0), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.dp-me::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--nation);
  box-shadow: 0 0 14px var(--nation);
}
.dp-me-name { font-size: 17px; font-weight: 900; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-me-sub { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 12.5px; color: var(--text-2); flex-wrap: wrap; }
.dp-me-sub b { color: var(--gold-hi); font-weight: 900; }
.dp-me-chips { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.dp-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); vertical-align: 3px; margin: 0 5px; }

/* ------------------------------------------------------------------ flags / medals */
.dp-flag {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 21px; line-height: 1;
  background: radial-gradient(circle at 35% 30%, rgb(var(--sk-43598a, 67, 89, 138)), rgb(var(--sk-111a2e, 17, 26, 46)) 72%);
  box-shadow: 0 0 0 2.5px var(--nation), 0 0 0 4.5px rgb(var(--sk-0b1120, 11, 17, 32)), 0 6px 12px rgba(var(--sk-000000, 0, 0, 0), 0.45), inset 0 2px 3px rgba(255, 255, 255, 0.22);
}
.dp-flag.xs { width: 20px; height: 20px; font-size: 11px; box-shadow: 0 0 0 1.5px var(--nation); vertical-align: -5px; margin: 0 3px; display: inline-grid; }
.dp-flag.sm { width: 30px; height: 30px; font-size: 15px; box-shadow: 0 0 0 2px var(--nation), 0 0 0 3.5px rgb(var(--sk-0b1120, 11, 17, 32)); }
.dp-flag.lg { width: 50px; height: 50px; font-size: 26px; }
.dp-flag.xl {
  width: 62px; height: 62px; font-size: 32px;
  box-shadow: 0 0 0 3px var(--nation), 0 0 0 6px rgb(var(--sk-0b1120, 11, 17, 32)), 0 0 0 7.5px rgba(var(--sk-f5c152, 245, 193, 82), 0.8), 0 0 24px color-mix(in srgb, var(--nation) 55%, transparent),
    0 10px 18px rgba(var(--sk-000000, 0, 0, 0), 0.5), inset 0 3px 5px rgba(255, 255, 255, 0.25);
}
.dp-medal {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 15px;
  color: rgb(var(--sk-3a2104, 58, 33, 4)); position: relative;
}
.dp-medal.m1 { background: linear-gradient(160deg, rgb(var(--sk-fff4c2, 255, 244, 194)), rgb(var(--sk-ffd35a, 255, 211, 90)) 45%, rgb(var(--sk-c77b10, 199, 123, 16))); box-shadow: 0 3px 0 rgb(var(--sk-8a5208, 138, 82, 8)), 0 6px 12px rgba(var(--sk-f5c152, 245, 193, 82), 0.35), inset 0 1.5px 0 rgba(255, 255, 255, 0.7); }
.dp-medal.m2 { background: linear-gradient(160deg, #ffffff, rgb(var(--sk-d3dce7, 211, 220, 231)) 45%, rgb(var(--sk-7b889a, 123, 136, 154))); box-shadow: 0 3px 0 rgb(var(--sk-4c5667, 76, 86, 103)), 0 6px 12px rgba(var(--sk-000000, 0, 0, 0), 0.35), inset 0 1.5px 0 rgba(255, 255, 255, 0.8); color: rgb(var(--sk-26303d, 38, 48, 61)); }
.dp-medal.m3 { background: linear-gradient(160deg, #ffd6ae, #d98a4a 45%, #8a4a1c); box-shadow: 0 3px 0 #5c2e0e, 0 6px 12px rgba(var(--sk-000000, 0, 0, 0), 0.35), inset 0 1.5px 0 rgba(255, 255, 255, 0.55); color: #3a1804; }
.dp-rank { flex: 0 0 auto; min-width: 38px; height: 26px; padding: 0 8px; border-radius: 13px; display: grid; place-items: center; font-size: 12.5px; font-weight: 900; color: var(--text-2); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.08); }
.dp-rank.none { color: var(--text-3); }

/* ------------------------------------------------------------------ segmented header */
.dp-seg {
  --n: 4;
  position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 0; margin: 14px 0 12px; padding: 4px;
  border-radius: 18px; background: linear-gradient(180deg, rgba(var(--sk-040810, 4, 8, 16), 0.75), rgba(var(--sk-0a101d, 10, 16, 29), 0.85));
  box-shadow: inset 0 2px 6px rgba(var(--sk-000000, 0, 0, 0), 0.55), 0 1px 0 rgba(255, 255, 255, 0.06);
}
.dp-seg.mini { --n: 2; margin: 2px 0 12px; }
.dp-seg-ind {
  position: absolute; top: 4px; bottom: 4px; right: 4px; width: calc((100% - 8px) / var(--n)); border-radius: 14px;
  background: linear-gradient(180deg, rgb(var(--sk-ffe58a, 255, 229, 138)), rgb(var(--sk-f0a52a, 240, 165, 42))); box-shadow: 0 3px 0 rgb(var(--sk-9a5808, 154, 88, 8)), 0 6px 14px rgba(var(--sk-f0a52a, 240, 165, 42), 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: translateX(calc(var(--i, 0) * -100%)); transition: transform 0.38s var(--ease-spring);
}
.dp-seg-btn {
  position: relative; z-index: 1; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 2px 5px; min-height: 52px; font-size: 11.5px; font-weight: 800; color: var(--text-3); transition: color 0.25s ease;
}
.dp-seg.mini .dp-seg-btn { flex-direction: row; justify-content: center; gap: 6px; min-height: 40px; font-size: 13px; }
.dp-seg-btn .ic { width: 24px; height: 24px; transition: transform 0.35s var(--ease-spring); filter: saturate(0.5) brightness(0.85); }
.dp-seg.mini .dp-seg-btn .ic { width: 21px; height: 21px; }
.dp-seg-btn.on { color: rgb(var(--sk-3b2004, 59, 32, 4)); }
.dp-seg-btn.on .ic { transform: scale(1.12) translateY(-1px); filter: none; }
.dp-badge {
  position: absolute; top: 2px; left: calc(50% - 26px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  font-style: normal; font-size: 10.5px; font-weight: 900; line-height: 18px; color: #fff; background: #de2f27;
  box-shadow: 0 0 0 2px rgb(var(--sk-0b1220, 11, 18, 32)); opacity: 0; transform: scale(0.4); transition: opacity 0.2s ease, transform 0.3s var(--ease-spring);
}
.dp-badge.on { opacity: 1; transform: scale(1); }
.dp-badge.hot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 12px; border: 2px solid #ff5d52; opacity: 0;
  animation: dpPing 1.6s ease-out infinite;
}
@keyframes dpPing { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }

/* ------------------------------------------------------------------ nations */
.dp-filters { margin-bottom: 2px; }
.dp-list > .card + .card { margin-top: 10px; }
.dp-nation {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: right; color: inherit; font: inherit; cursor: pointer;
  padding: 12px 14px 12px 12px; overflow: hidden;
}
.dp-stripe { position: absolute; inset: 0 0 0 auto; width: 4px; background: var(--nation); opacity: 0.9; }
.dp-nation-main { display: flex; flex-direction: column; gap: 4px; }
.dp-nation-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dp-name { font-weight: 900; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dp-nation-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--text-3); }
.dp-nation-meta span { display: inline-flex; align-items: center; gap: 3px; }
.dp-nation-meta .ic-sm { width: 16px; height: 16px; vertical-align: -3px; }
.dp-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.dp-tag {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 7px; border-radius: 11px; font-size: 11px; font-weight: 800;
  background: rgba(255, 255, 255, 0.06); color: var(--text-2); border: 1px solid rgba(255, 255, 255, 0.06);
}
.dp-tag .ic { width: 15px; height: 15px; }
.dp-tag.border { color: rgb(var(--sk-cfe6ff, 207, 230, 255)); background: rgba(var(--sk-4ea9ff, 78, 169, 255), 0.12); border-color: rgba(var(--sk-4ea9ff, 78, 169, 255), 0.22); }
.dp-tag.remote { color: #ffd0c9; background: rgba(255, 93, 82, 0.12); border-color: rgba(255, 93, 82, 0.24); }
.dp-tag.prot { color: rgb(var(--sk-d6e9ff, 214, 233, 255)); }
.dp-tag.npc { color: var(--text-3); }
.dp-nation.at_war { border-color: rgba(255, 93, 82, 0.4); }

/* relation chips: ally green · war red (pulsing dot) · ceasefire amber · treaty blue */
.dp-rel {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 11px;
  font-size: 11px; font-weight: 900; white-space: nowrap; color: var(--text-2); background: rgba(255, 255, 255, 0.07);
}
.dp-rel i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; position: relative; }
.dp-rel.ally { color: #8ff0b3; background: rgba(61, 220, 125, 0.14); }
.dp-rel.at_war { color: #ffb4ab; background: rgba(255, 93, 82, 0.18); }
.dp-rel.at_war i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: #ff5d52; animation: dpPulse 1.2s ease-out infinite; }
.dp-rel.ceasefire { color: rgb(var(--sk-ffd98a, 255, 217, 138)); background: rgba(var(--sk-f5c152, 245, 193, 82), 0.16); }
.dp-rel.treaty { color: rgb(var(--sk-a9d4ff, 169, 212, 255)); background: rgba(var(--sk-4ea9ff, 78, 169, 255), 0.16); }
@keyframes dpPulse { 0% { transform: scale(0.4); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } }

/* ------------------------------------------------------------------ sheets */
.dp-sheet .sheet-body { padding-bottom: 4px; }
.dp-head, .dp-war-head {
  position: relative; display: flex; align-items: center; gap: 14px; margin: 0 -16px 14px; padding: 6px 18px 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nation) 26%, transparent), transparent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dp-head h3, .dp-war-head h3 { font-size: 19px; }
.dp-head .sub, .dp-war-head .sub { display: flex; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
.dp-war-head { background: linear-gradient(180deg, rgba(222, 47, 39, 0.3), transparent); }
.dp-motto { text-align: center; font-size: 13px; color: var(--text-2); margin: -4px 0 10px; font-style: italic; }
.dp-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.dp-facts .dp-rel { height: 26px; font-size: 12px; }
.dp-war-mini {
  display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 14px;
  background: rgba(255, 93, 82, 0.1); border: 1px solid rgba(255, 93, 82, 0.28);
}
.dp-war-mini .ic { width: 30px; height: 30px; }
.dp-war-mini.ceasefire { background: rgba(var(--sk-f5c152, 245, 193, 82), 0.1); border-color: rgba(var(--sk-f5c152, 245, 193, 82), 0.3); }
.dp-reach { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 4px; }
.dp-reach-card {
  display: flex; gap: 8px; padding: 10px; border-radius: 14px; font-size: 12px; line-height: 1.6; color: var(--text-3);
  background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.06);
}
.dp-reach-card .ic { width: 30px; height: 30px; flex: 0 0 auto; filter: grayscale(0.6) brightness(0.85); }
.dp-reach-card b { display: block; color: var(--text-2); font-size: 12.5px; }
.dp-reach-card p { margin: 2px 0 0; }
.dp-reach-card.ok { border-color: rgba(61, 220, 125, 0.3); background: rgba(61, 220, 125, 0.06); }
.dp-reach-card.ok .ic { filter: none; }

/* big 3D action tiles */
.dp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.dp-act {
  --f1: rgb(var(--sk-34466a, 52, 70, 106)); --f2: rgb(var(--sk-1f2a44, 31, 42, 68)); --edge: rgb(var(--sk-0d1526, 13, 21, 38)); --glow: rgba(var(--sk-78aaff, 120, 170, 255), 0.18);
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  min-height: 72px; padding: 10px 12px; border: 0; border-radius: 18px; text-align: right; color: var(--text); font: inherit; cursor: pointer;
  background: radial-gradient(120% 90% at 85% 0%, var(--glow), transparent 60%), linear-gradient(180deg, var(--f1), var(--f2));
  box-shadow: 0 5px 0 var(--edge), 0 10px 18px rgba(var(--sk-000000, 0, 0, 0), 0.4), inset 0 1.5px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.dp-act:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--edge), 0 4px 8px rgba(var(--sk-000000, 0, 0, 0), 0.4), inset 0 1.5px 0 rgba(255, 255, 255, 0.2); }
.dp-act-ic { grid-row: 1 / span 2; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: rgba(var(--sk-000000, 0, 0, 0), 0.22); box-shadow: inset 0 2px 4px rgba(var(--sk-000000, 0, 0, 0), 0.4); }
.dp-act-ic .ic { width: 36px; height: 36px; }
.dp-act-t { font-size: 15px; font-weight: 900; }
.dp-act-s { font-size: 11px; color: rgba(var(--sk-e8eef8, 232, 238, 248), 0.62); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dp-act.primary { --f1: rgb(var(--sk-ffe58a, 255, 229, 138)); --f2: rgb(var(--sk-f2a62a, 242, 166, 42)); --edge: rgb(var(--sk-9a5808, 154, 88, 8)); color: rgb(var(--sk-3b2004, 59, 32, 4)); }
.dp-act.primary .dp-act-s { color: rgb(var(--sk-5e360d, 94, 54, 13)); }
.dp-act.success { --f1: #7cf3a5; --f2: #1eab52; --edge: #0b642b; color: #062d17; }
.dp-act.success .dp-act-s { color: #104327; }
.dp-act.danger { --f1: #ff8f7e; --f2: #de2f27; --edge: #85120f; color: #fff; }
.dp-act.danger .dp-act-s { color: #fff0ec; }
.dp-act.war { grid-column: 1 / -1; }
.dp-act.off { filter: grayscale(0.85) brightness(0.72); }

/* pickers */
.dp-presets { display: flex; gap: 6px; margin-bottom: 10px; }
.dp-presets .btn { flex: 1 1 0; }
.dp-picks { display: flex; flex-direction: column; gap: 7px; max-height: 42vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px 2px; }
.dp-pick {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 15px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.05); transition: border-color 0.2s ease, background-color 0.2s ease;
}
.dp-pick.on { background: rgba(var(--sk-f5c152, 245, 193, 82), 0.08); border-color: rgba(var(--sk-f5c152, 245, 193, 82), 0.35); }
.dp-pick b { display: block; font-size: 14px; }
.dp-pick small { font-size: 11.5px; color: var(--text-3); }
.ic-wrap.sm { width: 40px; height: 40px; border-radius: 12px; }
.ic-wrap.sm .ic { width: 28px; height: 28px; }
.dp-step { display: flex; align-items: center; gap: 6px; }
.dp-step b { min-width: 52px; text-align: center; font-size: 16px; font-weight: 900; padding: 4px 6px; border-radius: 10px; background: rgba(var(--sk-000000, 0, 0, 0), 0.3); box-shadow: inset 0 2px 4px rgba(var(--sk-000000, 0, 0, 0), 0.45); }
.dp-sum { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; font-size: 12.5px; color: var(--text-3); }
.dp-sum > span { flex: 0 0 auto; padding-top: 3px; }
.dp-sum > div, .dp-sum.two > div > div { display: flex; flex-wrap: wrap; gap: 5px; }
.dp-sum.two { display: grid; grid-template-columns: 1fr 1fr; }
.dp-sum.two > div { display: flex; flex-direction: column; gap: 4px; }
.dp-chipline {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 800;
  color: var(--text); background: rgba(255, 255, 255, 0.07);
}
.dp-chipline.ok { color: #baffd2; background: rgba(61, 220, 125, 0.12); }
.dp-chiplines { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.dp-qline { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.035); }
.dp-qline + .dp-qline { margin-top: 6px; }
.dp-qline b { display: block; font-size: 14px; }
.dp-qline small { font-size: 11.5px; color: var(--text-3); }
.dp-qamt { font-size: 15px; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.dp-qline.out .dp-qamt { color: #ffb4ab; }
.dp-qline.in .dp-qamt { color: #8ff0b3; }
.dp-qline.short { border: 1px solid rgba(255, 93, 82, 0.45); }
.dp-trade-x { display: grid; grid-template-columns: 1fr; gap: 4px; }
.dp-swap { display: grid; place-items: center; margin: 2px 0 -6px; }
.dp-swap .ic { width: 34px; height: 34px; }
.dp-note { font-size: 12.5px; color: var(--text-3); line-height: 1.8; margin: 12px 2px 4px; }
.dp-note .ic-sm { margin-left: 4px; }
.dp-note.center { text-align: center; margin-top: 16px; }
.dp-missing, .dp-warn { margin-top: 10px; padding: 9px 11px; border-radius: 13px; font-size: 12.5px; line-height: 1.7; display: flex; flex-direction: column; gap: 4px; }
.dp-missing { background: rgba(255, 93, 82, 0.09); border: 1px solid rgba(255, 93, 82, 0.25); color: #ffc2bb; }
.dp-warn { background: rgba(var(--sk-f5c152, 245, 193, 82), 0.08); border: 1px solid rgba(var(--sk-f5c152, 245, 193, 82), 0.28); color: rgb(var(--sk-ffe3a3, 255, 227, 163)); }
.dp-missing > div, .dp-warn > div { display: flex; gap: 6px; align-items: flex-start; }
.dp-row-label { font-size: 12.5px; font-weight: 800; color: var(--text-2); margin: 14px 2px 6px; }

/* treaty options */
.dp-options { display: flex; flex-direction: column; gap: 8px; }
.dp-option {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 16px; text-align: right; font: inherit; color: inherit; cursor: pointer;
  background: rgba(255, 255, 255, 0.035); border: 1.5px solid rgba(255, 255, 255, 0.06); transition: border-color 0.2s ease, background-color 0.2s ease;
}
.dp-option b { display: block; font-size: 14.5px; }
.dp-option small { display: block; font-size: 12px; color: var(--text-3); line-height: 1.6; }
.dp-option.on { border-color: rgba(var(--sk-4ea9ff, 78, 169, 255), 0.6); background: rgba(var(--sk-4ea9ff, 78, 169, 255), 0.08); }
.dp-option.off { opacity: 0.55; }
.dp-radio { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.25); position: relative; }
.dp-option.on .dp-radio { border-color: var(--blue); }
.dp-option.on .dp-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--blue); }
.dp-paper {
  position: relative; padding: 16px 16px 14px; border-radius: 16px; color: rgb(var(--sk-3b2a14, 59, 42, 20));
  background: linear-gradient(180deg, rgb(var(--sk-fbf3df, 251, 243, 223)), rgb(var(--sk-efdfbd, 239, 223, 189))); box-shadow: 0 10px 22px rgba(var(--sk-000000, 0, 0, 0), 0.4), inset 0 0 0 1px rgba(var(--sk-78501e, 120, 80, 30), 0.25);
}
.dp-paper-t { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.dp-paper-t .ic { width: 30px; height: 30px; }
.dp-paper p { margin: 8px 0; font-size: 13.5px; line-height: 1.8; }
.dp-paper ol { margin: 0; padding: 0 18px 0 0; font-size: 12.5px; line-height: 1.9; }
.dp-breach { display: flex; gap: 6px; align-items: flex-start; margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(var(--sk-78501e, 120, 80, 30), 0.35); font-size: 12px; color: #7a3b16; }
.dp-room .ttl { font-size: 14.5px; }
.dp-signs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dp-sign { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 10px; font-size: 12px; font-weight: 800; background: rgba(255, 255, 255, 0.06); color: var(--text-3); }
.dp-sign.ok { background: rgba(61, 220, 125, 0.12); color: #9dffbd; }

/* war + peace mode cards */
.dp-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dp-mode {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px 10px; border-radius: 18px;
  text-align: center; font: inherit; color: var(--text); cursor: pointer; overflow: hidden;
  background: linear-gradient(180deg, rgb(var(--sk-243352, 36, 51, 82)), rgb(var(--sk-121b2e, 18, 27, 46))); border: 1.5px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 5px 0 rgb(var(--sk-0b1322, 11, 19, 34)), 0 10px 18px rgba(var(--sk-000000, 0, 0, 0), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.08s ease, border-color 0.2s ease;
}
.dp-mode:active { transform: translateY(3px); }
.dp-mode-art { width: 78px; height: 78px; display: grid; place-items: center; border-radius: 50%; margin-bottom: 4px; background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%); }
.dp-mode-art .ic { width: 64px; height: 64px; transition: transform 0.35s var(--ease-spring); }
.dp-mode b { font-size: 14.5px; font-weight: 900; }
.dp-mode small { font-size: 11.5px; color: var(--text-3); line-height: 1.5; }
.dp-mode-status { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 2px 9px; border-radius: 10px; font-size: 11.5px; font-weight: 800; }
.dp-mode-status.ok { color: #9dffbd; background: rgba(61, 220, 125, 0.13); }
.dp-mode-status.no { color: rgb(var(--sk-ffd98a, 255, 217, 138)); background: rgba(var(--sk-f5c152, 245, 193, 82), 0.12); }
.dp-mode.on { border-color: rgba(255, 143, 126, 0.85); background: radial-gradient(120% 80% at 50% 0%, rgba(255, 93, 82, 0.28), transparent 70%), linear-gradient(180deg, #3a2130, #1a1220); }
.dp-mode.on .dp-mode-art .ic { transform: scale(1.1) rotate(-4deg); }
.dp-mode.peace.on { border-color: rgba(124, 243, 165, 0.8); background: radial-gradient(120% 80% at 50% 0%, rgba(61, 220, 125, 0.24), transparent 70%), linear-gradient(180deg, rgb(var(--sk-1c3a33, 28, 58, 51)), rgb(var(--sk-10201c, 16, 32, 28))); }
.dp-mode-detail { margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.035); font-size: 12.5px; color: var(--text-2); line-height: 1.7; }
.dp-mode-detail p { margin: 0; }
.dp-build { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; color: rgb(var(--sk-ffe3a3, 255, 227, 163)); }
.dp-build.ok { color: #9dffbd; }
.dp-objectives { margin-top: -2px; }
.dp-timeline { position: relative; margin: 4px 0 6px; padding-right: 6px; }
.dp-timeline::before { content: ""; position: absolute; top: 16px; bottom: 16px; right: 22px; width: 2px; background: linear-gradient(180deg, rgb(var(--sk-f5c152, 245, 193, 82)), #ff5d52); opacity: 0.6; }
.dp-tl { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 13px; line-height: 1.7; color: var(--text-2); }
.dp-tl-dot { position: relative; z-index: 1; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, rgb(var(--sk-2b3a5c, 43, 58, 92)), rgb(var(--sk-141d33, 20, 29, 51))); box-shadow: 0 0 0 3px rgb(var(--sk-0b1120, 11, 17, 32)), 0 4px 10px rgba(var(--sk-000000, 0, 0, 0), 0.4); }
.dp-tl-dot .ic { width: 22px; height: 22px; }
.dp-tl.combat .dp-tl-dot { background: linear-gradient(180deg, #a3322c, #5c1411); }

/* war flash */
.dp-fx { position: fixed; inset: 0; z-index: 95; pointer-events: none; display: grid; place-items: center; }
.dp-fx-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 55%, rgba(255, 120, 90, 0.55), rgba(160, 20, 20, 0.25) 45%, transparent 75%); opacity: 0; animation: dpFlash 1.1s ease-out forwards; }
.dp-fx-ring { position: absolute; width: 160px; height: 160px; border-radius: 50%; border: 4px solid rgba(255, 170, 120, 0.9); opacity: 0; animation: dpRing 0.9s var(--ease-out) forwards; }
.dp-fx-ring.r2 { animation-delay: 0.16s; border-color: rgba(255, 90, 70, 0.8); }
.dp-fx-ic { position: relative; animation: dpStreak 1s var(--ease-out) forwards; }
.dp-fx-ic .ic { width: 110px; height: 110px; }
@keyframes dpFlash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dpRing { 0% { transform: scale(0.2); opacity: 1; } 100% { transform: scale(3.4); opacity: 0; } }
@keyframes dpStreak { 0% { transform: translate(120px, 160px) scale(0.6); opacity: 0; } 30% { opacity: 1; } 70% { transform: translate(0, 0) scale(1.15); opacity: 1; } 100% { transform: translate(-30px, -40px) scale(1.4); opacity: 0; } }

/* ------------------------------------------------------------------ wars */
.dp-war { overflow: hidden; }
.dp-war::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, color-mix(in srgb, var(--mine) 18%, transparent), transparent 40%, transparent 60%, color-mix(in srgb, var(--enemy) 22%, transparent)); }
.dp-war.active { border-color: rgba(255, 93, 82, 0.45); }
.dp-vs { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.dp-side { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.dp-side b { font-size: 13.5px; font-weight: 900; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-vs-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--text-3); font-weight: 800; }
.dp-vs-mid .ic { width: 42px; height: 42px; }
.dp-war.active .dp-vs-mid .ic { animation: dpShake 2.4s ease-in-out infinite; }
@keyframes dpShake { 0%, 84%, 100% { transform: none; } 88% { transform: translateX(-2px) rotate(-4deg); } 92% { transform: translateX(2px) rotate(4deg); } 96% { transform: translateX(-1px); } }
.dp-war-meta { position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.dp-state { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12px; font-weight: 900; background: rgba(255, 255, 255, 0.07); }
.dp-state i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; position: relative; }
.dp-state.active { color: #ffb4ab; background: rgba(255, 93, 82, 0.18); }
.dp-state.active i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: #ff5d52; animation: dpPulse 1.2s ease-out infinite; }
.dp-state.declared { color: rgb(var(--sk-ffd98a, 255, 217, 138)); background: rgba(var(--sk-f5c152, 245, 193, 82), 0.15); }
.dp-state.ceasefire { color: rgb(var(--sk-a9f0e6, 169, 240, 230)); background: rgba(var(--sk-3fd8d0, 63, 216, 208), 0.13); }
.dp-timers { position: relative; display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12.5px; color: var(--text-3); }
.dp-timers span { display: inline-flex; align-items: center; gap: 5px; }
.dp-timers b { color: var(--text); font-weight: 900; }
.dp-pending { position: relative; display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: #9dffbd; }
.dp-war .btns { position: relative; flex-wrap: wrap; }
.dp-peace { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dp-peace b { font-size: 18px; color: var(--text); }
.dp-world-wars { padding: 6px 12px; }
.dp-ww { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 8px; padding: 8px 0; font-size: 13px; }
.dp-ww + .dp-ww { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.dp-ww-n { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-ww-n::before { content: ""; width: 10px; height: 10px; flex: 0 0 auto; border-radius: 3px; background: var(--nation); }
.dp-ww small { font-size: 11px; color: var(--text-3); }
.dp-ww-x.active .ic { animation: dpShake 2.4s ease-in-out infinite; }

/* ------------------------------------------------------------------ requests */
.dp-req { border-inline-start: 3px solid var(--nation, transparent); }
.dp-req.urgent { border-color: rgba(255, 93, 82, 0.55); background: radial-gradient(120% 70% at 100% 0%, rgba(255, 93, 82, 0.16), transparent 60%), linear-gradient(180deg, var(--panel1), var(--panel2)); }
.dp-req.gift_box { border-color: rgba(var(--sk-f5c152, 245, 193, 82), 0.5); background: radial-gradient(120% 70% at 100% 0%, rgba(var(--sk-f5c152, 245, 193, 82), 0.16), transparent 60%), linear-gradient(180deg, var(--panel1), var(--panel2)); }
.dp-req-kind { display: flex; align-items: center; flex-wrap: wrap; font-size: 11.5px; font-weight: 800; color: var(--text-3); }
.dp-req .ttl { font-size: 14.5px; }
.dp-left { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 3px 8px; border-radius: 10px; font-size: 12px; color: rgb(var(--sk-ffd98a, 255, 217, 138)); background: rgba(var(--sk-f5c152, 245, 193, 82), 0.1); }
.dp-io { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--text-3); }
.dp-io b { padding: 2px 8px; border-radius: 9px; font-size: 12.5px; }
.dp-io.out b { color: #ffc2bb; background: rgba(255, 93, 82, 0.1); }
.dp-io.in b { color: #aaf5c4; background: rgba(61, 220, 125, 0.1); }
.btns.wrap { flex-wrap: wrap; }
.btns.wrap > .btn { flex: 1 1 40%; }
.btns.wrap > .btn.sm { flex: 1 1 28%; }
.dp-news { padding: 4px 14px; }
.dp-news-i { padding: 10px 0; }
.dp-news-i + .dp-news-i { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.dp-news-i b { font-size: 13.5px; }
.dp-news-i p { margin: 2px 0; font-size: 12.5px; color: var(--text-2); line-height: 1.7; }
.dp-news-i small { font-size: 11px; color: var(--text-3); }
.dp-news-i.warfare b { color: #ffb4ab; }

/* ------------------------------------------------------------------ leaderboard */
.dp-groups { margin-top: -4px; }
.dp-board-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); margin: 2px 2px 8px; }
.dp-board-head .ic { width: 24px; height: 24px; }
.dp-podium { direction: ltr; display: grid; grid-template-columns: 1fr 1.12fr 1fr; align-items: end; gap: 8px; margin: 10px 0 16px; min-height: 250px; }
.dp-podium.skel-pod { min-height: 130px; }
.dp-pod { direction: rtl; display: flex; flex-direction: column; align-items: center; animation: dpRise 0.7s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 110ms + 80ms); }
.dp-pod.empty { visibility: hidden; }
@keyframes dpRise { from { transform: translateY(40px); opacity: 0; } }
.dp-pod-who { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-bottom: 8px; min-width: 0; max-width: 100%; text-align: center; position: relative; }
.dp-pod-who b { font-size: 13px; font-weight: 900; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-pod-who .num { font-size: 12.5px; font-weight: 900; color: var(--gold-hi); }
.dp-crown { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); animation: dpFloat 3s ease-in-out infinite; }
.dp-crown .ic { width: 34px; height: 34px; }
@keyframes dpFloat { 50% { transform: translate(-50%, -4px); } }
.dp-pod-block {
  --top: rgb(var(--sk-ffe9a8, 255, 233, 168)); --f1: rgb(var(--sk-ffd35a, 255, 211, 90)); --f2: rgb(var(--sk-b86e0c, 184, 110, 12)); --edge: rgb(var(--sk-6b3f06, 107, 63, 6));
  position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 16px;
  border-radius: 6px 6px 12px 12px; background: linear-gradient(180deg, var(--f1), var(--f2));
  box-shadow: 0 6px 0 var(--edge), 0 14px 24px rgba(var(--sk-000000, 0, 0, 0), 0.45), inset 0 -8px 16px rgba(var(--sk-000000, 0, 0, 0), 0.15);
}
.dp-pod-top { position: absolute; left: 0; right: 0; top: -12px; height: 16px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #ffffff, var(--top)); transform: perspective(90px) rotateX(38deg); transform-origin: bottom; opacity: 0.95; }
.dp-pod-n { font-size: 34px; font-weight: 900; line-height: 1; color: rgba(var(--sk-3c2305, 60, 35, 5), 0.75); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.dp-pod-block small { display: block; margin: 6px 6px 8px; font-size: 10.5px; font-weight: 800; line-height: 1.4; text-align: center; color: rgba(var(--sk-281905, 40, 25, 5), 0.85); }
.dp-pod.p1 .dp-pod-block { height: 118px; }
.dp-pod.p2 .dp-pod-block { height: 88px; --top: #ffffff; --f1: rgb(var(--sk-e3e9f1, 227, 233, 241)); --f2: rgb(var(--sk-7b889a, 123, 136, 154)); --edge: rgb(var(--sk-3d4656, 61, 70, 86)); }
.dp-pod.p3 .dp-pod-block { height: 68px; --top: rgb(var(--sk-ffe2c4, 255, 226, 196)); --f1: #e7a066; --f2: #8a4a1c; --edge: #4a2208; }
.dp-pod.p2 .dp-pod-n { color: rgba(var(--sk-1e2632, 30, 38, 50), 0.7); }
.dp-pod.p3 .dp-pod-n { color: rgba(60, 25, 5, 0.7); }
.dp-pod.me .dp-pod-who b { color: var(--gold-hi); }
.dp-board { display: flex; flex-direction: column; gap: 6px; }
.dp-brow {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-radius: 15px; font: inherit; color: inherit; text-align: right; cursor: pointer;
  background: linear-gradient(180deg, rgba(var(--sk-212e49, 33, 46, 73), 0.9), rgba(var(--sk-101829, 16, 24, 41), 0.92)); border-inline-start: 3px solid var(--nation);
  box-shadow: 0 5px 12px rgba(var(--sk-000000, 0, 0, 0), 0.25);
}
.dp-brow:active { transform: scale(0.985); }
.dp-brow.me { background: linear-gradient(180deg, rgba(var(--sk-4a3a16, 74, 58, 22), 0.95), rgba(var(--sk-241c0c, 36, 28, 12), 0.96)); box-shadow: 0 0 0 1.5px rgba(var(--sk-f5c152, 245, 193, 82), 0.6), 0 8px 16px rgba(var(--sk-000000, 0, 0, 0), 0.4); }
.dp-brank { min-width: 26px; text-align: center; font-weight: 900; font-size: 14px; color: var(--text-2); }
.dp-bname { font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-bname em { font-style: normal; font-size: 10.5px; font-weight: 900; color: rgb(var(--sk-3b2004, 59, 32, 4)); background: var(--gold); border-radius: 7px; padding: 0 6px; margin-right: 6px; vertical-align: 1px; }
.dp-bscore { font-weight: 900; font-size: 14px; color: var(--gold-hi); }
.dp-trend { font-size: 11px; font-weight: 900; }
.dp-trend.up { color: var(--green); }
.dp-trend.down { color: var(--red); }
.dp-me-pin { position: sticky; bottom: 6px; z-index: 2; margin-top: 10px; }
.dp-me-pin.ghost { display: none; }

@media (max-width: 370px) {
  .dp-seg-btn { font-size: 10.5px; }
  .dp-act { min-height: 66px; padding: 8px 10px; }
  .dp-act-ic { width: 40px; height: 40px; }
  .dp-act-ic .ic { width: 30px; height: 30px; }
  .dp-mode-art { width: 64px; height: 64px; }
  .dp-mode-art .ic { width: 52px; height: 52px; }
  .dp-podium { min-height: 226px; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-fx { display: none; }
  .dp-seg-ind { transition: none; }
}
.dp-peace-cities { display:grid; gap:7px; max-height:34vh; overflow:auto; margin:12px 0; padding:10px; border:1px solid var(--edge-2); border-radius:16px; background:rgba(var(--sk-051218, 5, 18, 24), .58); }
.dp-peace-cities>b { color:var(--gold-hi); }
.dp-peace-cities>p,.dp-peace-city-note,.dp-peace-city-warning p { margin:0; color:var(--text-2); font-size:12px; }
.dp-peace-cities>label { display:flex; align-items:center; gap:9px; min-height:42px; padding:6px 9px; border-radius:11px; background:rgba(255,255,255,.035); }
.dp-peace-cities input { width:20px; height:20px; flex:0 0 auto; accent-color:rgb(var(--sk-62d5bd, 98, 213, 189)); }
.dp-peace-cities small { color:var(--text-2); }
.dp-peace-city-warning { display:flex; align-items:center; gap:8px; justify-content:space-between; margin:10px 0; }