/* ============ World-conquest modal (territory + challenge) ============ */
/* Colours are the theme's (tokens.css): every value here used to be a dark-theme
   literal, so on the light theme the conquest card stayed a dark slab. */
.hidden { display:none !important; }
.cyber-modal.hidden { display:none; }
/* The dialog stays between the navbar and the phone's bottom bar (both sit
   above it, z 60/70): at 320x640 it ran 27px under the one and 25px under the
   other, the country pill and the close button half hidden. The heights are the
   live ones (theme-toggle.js keeps --nav-h / --bnav-h); the content scrolls. */
.cyber-modal{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--nav-h,0px) + 10px) 24px calc(var(--bnav-h,0px) + 10px);
}
.cyber-modal__backdrop{
  position:absolute; inset:0; backdrop-filter:blur(7px);
  background: radial-gradient(900px 600px at 50% -10%, rgba(var(--gold-rgb),.06), transparent 60%), rgba(4,7,14,.62);
}

.cyber-modal__dialog{
  position:relative; z-index:1;
  width:min(440px, 100%); max-height:min(88vh, 100%);
  display:flex; flex-direction:column;
  color:var(--text, #f0ede6);
  background:var(--md-bg, linear-gradient(160deg, rgba(24,30,46,.9), rgba(14,18,30,.86)));
  backdrop-filter:blur(26px) saturate(150%); -webkit-backdrop-filter:blur(26px) saturate(150%);
  border:1px solid var(--md-line, rgba(255,255,255,.1));
  border-radius:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 30px 70px rgba(0,0,0,.55);
  overflow:hidden;
  animation: modal-pop .18s ease-out;
}
.cyber-modal__dialog h1,.cyber-modal__dialog h2,.cyber-modal__dialog h3,
.cyber-modal__dialog h4,.cyber-modal__dialog p{ color:var(--text, #f0ede6); }
.cyber-modal__dialog b{ color:var(--md-strong, #f6ecd2); }
@keyframes modal-pop{ from{ opacity:0; transform:translateY(8px) scale(.97); } to{ opacity:1; transform:none; } }

.cyber-modal__header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px;
  border-bottom:1px solid var(--md-line, rgba(255,255,255,.07));
}
.cyber-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px; font-weight:700;
  color:#1a1305; background:linear-gradient(95deg, #f0d488, var(--gold-deep));
  text-transform:uppercase; letter-spacing:.6px; font-size:12px;
  box-shadow:0 2px 10px rgba(199,154,68,.3);
}
.cyber-close{
  border:0; background:var(--md-chip, rgba(255,255,255,.05)); color:var(--soft, #cdd9ee); font-size:15px; line-height:1;
  width:32px; height:32px; display:grid; place-items:center;
  border-radius:9px; cursor:pointer; transition:background .15s, color .15s;
}
.cyber-close:hover{ background:var(--md-chip-h, rgba(255,255,255,.12)); color:var(--text, #fff); }

.cyber-modal__content{
  padding:20px 18px;
  overflow:auto;
}

/* shared text styles used by the conquest panels */
.scenario-summary{ color:var(--soft, #b9b3a4); font-size:14px; line-height:1.5; }
.scenario-meta{ color:var(--dim, #7d7a70); font-size:12px; margin:0 0 12px; letter-spacing:.3px; text-transform:uppercase; }
#result-title{ font-family:'Fraunces',Georgia,serif; font-weight:500; color:var(--text, #f0ede6); }

@media (max-width: 520px){
  .cyber-modal{ padding:calc(var(--nav-h,0px) + 8px) 14px calc(var(--bnav-h,0px) + 8px); }
  .cyber-modal__dialog{ width:100%; }
}

html[data-theme="light"]{
  --md-bg:linear-gradient(160deg, rgba(255,255,255,.96), rgba(241,245,252,.94));
  --md-line:rgba(28,39,64,.12); --md-strong:#1c2740;
  --md-chip:rgba(28,39,64,.06); --md-chip-h:rgba(28,39,64,.12);
}
html[data-theme="light"] .cyber-modal__backdrop{
  background:radial-gradient(900px 600px at 50% -10%, rgba(var(--gold-rgb),.10), transparent 60%), rgba(28,39,64,.32); }
html[data-theme="light"] .cyber-modal__dialog{ box-shadow:0 30px 70px rgba(30,48,90,.22); }