/* ── WORLD SCREEN ─────────────────────────────────────────────── */
#worldScreen {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
}

/* ── DRAG NODE BASE ───────────────────────────────────────────── */
.drag-node {
  position: absolute;
  cursor: grab;
  user-select: none;
  z-index: 10;
  touch-action: none;
  will-change: transform;
}
.drag-node:active { cursor: grabbing; }

/* ── DOME NODES — square card with image + golden label ─────── */
.dome-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: filter 0.15s;
  background: rgba(5,3,14,0.48);
  border: 1px solid rgba(255,215,0,0.22);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  will-change: transform;
}
.dome-node:hover { filter: brightness(1.18); }

.dome-node-img {
  width: 108px;
  height: 108px;
  border-radius: 14px;
  border: 2px solid rgba(255,215,0,0.55);
  box-shadow: 0 0 18px rgba(255,215,0,0.3), 0 4px 20px rgba(0,0,0,0.7);
  background: rgba(10,8,20,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  overflow: hidden;
}
.dome-node-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  pointer-events: none;
}
.dome-node-label {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,215,0,0.9);
  text-shadow: 0 0 8px rgba(255,215,0,0.7), 0 1px 4px rgba(0,0,0,0.9);
  white-space: nowrap;
  text-align: center;
  background: rgba(0,0,0,0.55);
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,215,0,0.2);
}
.dome-node-timer {
  font-size: 0.55rem;
  color: rgba(255,215,0,0.55);
  text-align: center;
  letter-spacing: 1px;
  background: rgba(0,0,0,0.4);
  padding: 1px 6px;
  border-radius: 5px;
}

/* Mine node ready glow */
.mine-ready {
  box-shadow: 0 0 0 2px rgba(80,220,80,0.9), 0 0 18px rgba(80,220,80,0.6), 0 0 40px rgba(80,220,80,0.25) !important;
  animation: mine-pulse 1.8s ease-in-out infinite;
  will-change: opacity;
}
@keyframes mine-pulse {
  0%,100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

/* ── PORTAL FULL-SCREEN EXPERIENCE ──────────────────────────── */
.portal-glyph-btn {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 2px solid rgba(255,215,0,0.55);
  background: rgba(8,4,20,0.52);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 60px rgba(255,215,0,0.3), 0 0 120px rgba(140,60,255,0.25), inset 0 0 40px rgba(255,215,0,0.06);
  animation: portalGlyphPulse 2.8s ease-in-out infinite;
  transition: transform 0.2s;
  user-select: none;
  will-change: opacity, transform;
}
.portal-glyph-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 0 90px rgba(255,215,0,0.5), 0 0 180px rgba(140,60,255,0.4), inset 0 0 60px rgba(255,215,0,0.12);
}
@keyframes portalGlyphPulse {
  0%, 100% { opacity: 0.82; }
  50%       { opacity: 1; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.portal-form-card {
  width: min(700px, 94vw);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: none;
  background-image: url('/assets/portal/portal_form_frame_world1.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: rgba(8,6,18,0.99);
  padding: 70px 55px 75px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.95);
  animation: minePopIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,160,0,0.45) rgba(4,2,14,0.92);
}
.portal-form-card::-webkit-scrollbar         { width: 7px; }
.portal-form-card::-webkit-scrollbar-track   { background: rgba(4,2,14,0.92); border-radius: 4px; }
.portal-form-card::-webkit-scrollbar-thumb   { background: rgba(255,160,0,0.45); border-radius: 4px; }
.portal-form-card::-webkit-scrollbar-thumb:hover { background: rgba(255,215,0,0.75); }

/* ── World Lore & World Info popup scrollbars ────────────────── */
#worldLoreOverlay,
#worldLoreOverlay > div,
#worldInfoPopup > div {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,160,0,0.45) rgba(4,2,14,0.92);
}
#worldLoreOverlay::-webkit-scrollbar,
#worldLoreOverlay > div::-webkit-scrollbar,
#worldInfoPopup > div::-webkit-scrollbar         { width: 7px; }
#worldLoreOverlay::-webkit-scrollbar-track,
#worldLoreOverlay > div::-webkit-scrollbar-track,
#worldInfoPopup > div::-webkit-scrollbar-track   { background: rgba(4,2,14,0.92); border-radius: 4px; }
#worldLoreOverlay::-webkit-scrollbar-thumb,
#worldLoreOverlay > div::-webkit-scrollbar-thumb,
#worldInfoPopup > div::-webkit-scrollbar-thumb   { background: rgba(255,160,0,0.45); border-radius: 4px; }
#worldLoreOverlay::-webkit-scrollbar-thumb:hover,
#worldLoreOverlay > div::-webkit-scrollbar-thumb:hover,
#worldInfoPopup > div::-webkit-scrollbar-thumb:hover { background: rgba(255,215,0,0.75); }

/* Header strip */
.portal-form-card .dome-panel-header {
  background: linear-gradient(90deg, rgba(255,215,0,0.06) 0%, rgba(180,80,255,0.06) 100%);
  border-bottom: 1px solid rgba(255,215,0,0.18);
  border-radius: 18px 18px 0 0;
  padding: 10px 18px 8px;
  margin-bottom: 0;
}
.portal-form-card .dome-panel-title {
  font-size: 1rem;
  letter-spacing: 4px;
  color: rgba(255,215,0,0.95);
  text-shadow: 0 0 20px rgba(255,215,0,0.5);
}

/* Form body padding */
.portal-form-body {
  padding: 12px 20px 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Inputs and selects — distinct from card background, gold text */
.portal-form-body input[type="text"],
.portal-form-body input[type="number"],
.portal-form-body select,
#portalFormWrap .warband-select {
  background: rgba(42, 29, 78, 0.596) !important;
  border-color: rgba(255, 217, 0, 0.226) !important;
  color: rgba(255, 215, 0, 0.92) !important;
}
.portal-form-body input[type="text"]::placeholder,
.portal-form-body input[type="number"]::placeholder {
  color: rgba(255, 217, 0, 0.466) !important;
}
.portal-form-body input[type="text"]:focus,
.portal-form-body input[type="number"]:focus,
.portal-form-body select:focus {
  border-color: rgba(255, 215, 0, 0.65) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.1) !important;
}

/* Section label */
.portal-field-label {
  font-size: 0.52rem;
  letter-spacing: 3px;
  color: rgba(255,215,0,0.55);
  text-transform: uppercase;
  margin-bottom: 4px;
  margin-top: 10px;
}
.portal-field-label:first-child { margin-top: 0; }

/* Toggle button pair */
.portal-toggle-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 2px;
}
.portal-toggle-btn {
  padding: 7px 0;
  border-radius: 8px;
  border: 1px solid rgba(200,190,255,0.45);
  background: rgb(38, 34, 68);
  color: rgba(255,255,255,0.75);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  text-transform: uppercase;
}
.portal-toggle-btn:hover { background: rgb(58, 52, 98); color: #ffffff; }
.portal-toggle-btn.active.order-market {
  background: rgb(8, 62, 26);
  border-color: rgba(60,220,100,0.7);
  color: #4dea80;
  box-shadow: 0 0 14px rgba(40,200,80,0.25);
}
.portal-toggle-btn.active.order-limit {
  background: rgba(90,20,180,0.85);
  border-color: rgba(160,80,255,0.85);
  color: #cc77ff;
  box-shadow: 0 0 14px rgba(140,50,255,0.4);
}
.portal-toggle-btn.active.dir-long {
  background: rgb(8, 62, 26);
  border-color: rgba(50,220,100,0.7);
  color: #3ddd70;
  box-shadow: 0 0 14px rgba(40,200,80,0.25);
}
.portal-toggle-btn.active.dir-short {
  background: rgb(72, 10, 10);
  border-color: rgba(255,80,80,0.7);
  color: #ff5555;
  box-shadow: 0 0 14px rgba(220,50,50,0.25);
}

/* Size mode buttons */
.portal-size-btn {
  padding: 8px 4px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgb(38, 34, 68);
  color: rgba(255,255,255,0.55);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  text-transform: uppercase;
}
.portal-size-btn:hover { background: rgb(58,52,98); color: #fff; }
.portal-size-btn.active {
  background: rgb(72, 52, 0);
  border-color: rgba(255,215,0,0.7);
  color: #FFD700;
  box-shadow: 0 0 12px rgba(255,215,0,0.2);
}

/* Risk preset quick-pick buttons */
.portal-preset-btn {
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid rgba(255,215,0,0.25);
  background: rgb(38, 28, 60);
  color: rgba(255,215,0,0.65);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.portal-preset-btn:hover {
  background: rgb(72, 52, 0);
  border-color: rgba(255,215,0,0.6);
  color: #FFD700;
}
.portal-preset-btn.active {
  background: rgb(90, 66, 0);
  border-color: rgba(255,215,0,0.85);
  color: #FFD700;
  box-shadow: 0 0 8px rgba(255,215,0,0.2);
}

/* Profit target buttons */
.portal-pt-btn {
  padding: 10px 8px;
  border-radius: 9px;
  border: 1px solid rgba(255,215,0,0.35);
  background: rgb(55, 38, 0);
  color: rgba(255,215,0,0.7);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 1px;
  transition: all 0.18s;
  text-transform: uppercase;
  width: 100%;
}
.portal-pt-btn:hover { background: rgb(80, 56, 0); color: #FFD700; }
.portal-pt-btn.active {
  background: rgb(100, 72, 0);
  border-color: rgba(255,215,0,0.85);
  color: #FFD700;
  box-shadow: 0 0 14px rgba(255,215,0,0.25);
}

/* Section divider */
.portal-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.15), transparent);
  margin: 10px 0 0;
}

/* Risk grid */
.portal-risk-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
.portal-risk-btn {
  padding: 7px 0;
  border-radius: 8px;
  border: 1px solid rgba(255,215,0,0.95);
  background: rgba(160,110,0,0.94);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.portal-risk-btn:hover { background: rgba(200,145,0,0.97); color: #ffffff; border-color: #FFD700; }
.portal-risk-btn.active {
  background: rgba(255,200,0,0.95);
  border-color: #FFD700;
  color: #0a0410;
  box-shadow: 0 0 14px rgba(255,215,0,0.4);
}

/* Asset autocomplete dropdown */
.asset-ac-item {
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background 0.1s;
}
.asset-ac-item:hover, .asset-ac-item.ac-active {
  background: rgba(255,215,0,0.12);
  color: #FFD700;
}
#assetDropdown::-webkit-scrollbar { width: 4px; }
#assetDropdown::-webkit-scrollbar-track { background: transparent; }
#assetDropdown::-webkit-scrollbar-thumb { background: rgba(255,215,0,0.2); border-radius: 4px; }

/* Activate button */
.portal-activate-btn {
  width: 100%;
  padding: 11px 0;
  border-radius: 10px;
  border: 2px solid rgba(255,215,0,0.95);
  background: linear-gradient(135deg, rgba(200,145,0,0.96) 0%, rgba(140,80,0,0.96) 100%);
  color: rgba(255,215,0,0.95);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  margin-top: 12px;
  transition: all 0.18s;
  box-shadow: 0 0 24px rgba(255,215,0,0.1), inset 0 1px 0 rgba(255,215,0,0.1);
}
.portal-activate-btn:hover {
  background: linear-gradient(135deg, rgba(255,215,0,0.24) 0%, rgba(200,130,0,0.2) 100%);
  border-color: rgba(255,215,0,0.8);
  box-shadow: 0 0 40px rgba(255,215,0,0.25), inset 0 1px 0 rgba(255,215,0,0.15);
  transform: translateY(-1px);
}
.portal-activate-btn:active { transform: translateY(1px); }

/* ── WORLD PORTAL ────────────────────────────────────────────── */
#portalNode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.portal-ring {
  position: relative;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: none;
  box-shadow:
    inset 0 0 28px 14px rgba(0,0,0,0.85),
    inset 0 0 60px 20px rgba(0,0,0,0.55),
    0 8px 32px rgba(0,0,0,0.7),
    0 2px 8px rgba(0,0,0,0.9);
  overflow: hidden;
  animation: portalPulse 3s ease-in-out infinite;
  will-change: opacity;
  transform: translateZ(0);
  background: rgba(10,8,20,0.9);
}
.portal-ring img,
.portal-ring video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  pointer-events: none;
}
.portal-ring img {
  filter: brightness(0.9) saturate(1.2);
}
@keyframes smokePulse {
  0%, 100% { opacity: 0.9; }
  50%       { opacity: 0.55; }
}
@keyframes portalPulse {
  0%,100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
.portal-world-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 18px;
  position: relative;
  z-index: 5;
}
.portal-world-num {
  font-size: 0.52rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,215,0,0.5);
  font-weight: 700;
}
.portal-label {
  font-size: 0.68rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,215,0,0.9);
  text-shadow: 0 0 10px rgba(255,215,0,0.8);
  font-weight: 800;
}

/* ── BOTTOM ACTION BAR ───────────────────────────────────────── */
#actionBar {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 100;
  white-space: nowrap;
  background: transparent;
  border: none;
}

/* Portal image button — replaces text PORTAL/SCAN/MAP buttons */
.action-portal-img {
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.18s;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6), 0 0 16px rgba(255,215,0,0.1);
  display: block;
}
.action-portal-img img {
  display: block;
  width: 190px;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}
.action-portal-img:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.75), 0 0 28px rgba(255,215,0,0.2);
  filter: brightness(1.12);
}
.action-portal-img:active { transform: translateY(1px); }

.forge-link-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  font-size: 0.55rem;
  letter-spacing: 1.5px;
  color: rgba(0,255,136,0.7);
  background: rgba(0,40,20,0.75);
  border: 1px solid rgba(0,200,80,0.25);
  border-radius: 50px;
}
.forge-link-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #00FF88;
  box-shadow: 0 0 6px #00FF88;
  animation: blink 2s ease-in-out infinite;
  will-change: opacity;
}
@keyframes blink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* ── MAP MODAL — full-screen ─────────────────────────────────── */
#mapModalOverlay { background: #000 !important; }

#mapModal {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  background: rgba(5,3,12,0.97);
  border-radius: 0;
  border: none;
  padding: 0;
  max-height: none;
  overflow: hidden;
  box-shadow: none;
  animation: fadeIn 0.25s ease;
}
.map-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  flex-shrink: 0;
  background: rgba(5,3,12,0.96);
  border-bottom: 1px solid rgba(255,215,0,0.12);
}
.map-modal-title {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,215,0,0.8);
}

/* ── MAP CONTAINER ───────────────────────────────────────────── */
#campaignMap {
  flex: 1;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  line-height: 0;
}
#worldMapBg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0;
  pointer-events: none;
  object-fit: cover;
}

/* ── WORLD MAP MARKERS ───────────────────────────────────────── */
.wmap-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.18s;
  will-change: transform;
}
.wmap-marker:hover { transform: translate(-50%, -50%) scale(1.1); }

.wmap-img-wrap {
  position: relative;
  width: 250px;
  height: 750px;
  overflow: visible;
  background: transparent;
  transform: translateZ(0);
}
.wmap-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.wmap-pole { display: none; }

/* Current world — static drop-shadow, pulse opacity only (filter animation is very expensive) */
.wmap-marker.wmap-current .wmap-img-wrap {
  width: 320px;
  height: 960px;
  filter: drop-shadow(0 0 20px rgba(255,215,0,0.95)) drop-shadow(0 0 40px rgba(255,215,0,0.6));
  animation: wmap-pulse 2.5s ease-in-out infinite;
  will-change: opacity;
}

@keyframes wmap-pulse {
  0%, 100% { opacity: 0.88; }
  50%       { opacity: 1.0; }
}

/* ── MAP INFO PANEL ──────────────────────────────────────────── */
#mapInfoPanel {
  flex-shrink: 0;
  background: rgba(4,2,10,0.97);
  border-top: 1px solid rgba(255,215,0,0.1);
  padding: 10px 14px;
  animation: fadeIn 0.2s ease;
}
#mapInfoContent {
  display: flex;
  align-items: stretch;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(8,5,20,0.96);
}
.mip-banner {
  width: 44px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.mip-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mip-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 50%, rgba(8,5,20,0.85));
}
.mip-body {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  position: relative;
}
.mip-label {
  font-size: 0.46rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 800;
}
.mip-name {
  font-size: 1.05rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}
.mip-sub {
  font-size: 0.56rem;
  color: rgba(255,255,255,0.38);
  letter-spacing: 1px;
}
.mip-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 16px;
}
.mip-action button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 18px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}

/* ── CHEST & CHARACTER REVEAL ────────────────────────────────── */
.char-reveal-card {
  background: rgba(8,6,18,0.98);
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 18px;
  padding: 28px 32px;
  width: 360px;
  max-width: 95vw;
  text-align: center;
  animation: fadeIn 0.3s ease;
  box-shadow: 0 0 60px rgba(255,215,0,0.2), 0 12px 60px rgba(0,0,0,0.9);
}
.char-reveal-tier-badge {
  font-size: 0.55rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,215,0,0.6);
  background: rgba(255,215,0,0.08);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 6px;
  padding: 2px 10px;
  display: inline-block;
  margin-bottom: 14px;
}
.char-reveal-img-wrap {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 16px;
  border: 3px solid rgba(255,215,0,0.5);
  box-shadow: 0 0 30px rgba(255,215,0,0.4);
}
.char-reveal-img { width: 100%; height: 100%; object-fit: cover; }
.char-reveal-name { font-size: 1.1rem; font-weight: 700; color: var(--gold); margin-bottom: 4px; }
.char-reveal-role { font-size: 0.7rem; color: var(--dim); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; }
.char-reveal-dup-msg { font-size: 0.78rem; color: rgba(255,180,50,0.8); background: rgba(255,180,50,0.08); border: 1px solid rgba(255,180,50,0.2); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; line-height: 1.5; }
.char-reveal-actions { display: flex; gap: 10px; justify-content: center; }
.char-btn { padding: 9px 20px; border-radius: 9px; font-size: 0.75rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.18s; border: 1px solid; }
.char-btn-reroll { background: rgba(100,100,200,0.12); border-color: rgba(100,100,200,0.4); color: #aac0ff; }
.char-btn-claim  { background: rgba(0,200,80,0.12); border-color: rgba(0,200,80,0.4); color: #00e070; }
.char-btn { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); }

/* ── CHAMPION PICKER ─────────────────────────────────────────── */
.champ-picker-modal {
  background: rgba(8,6,18,0.98);
  border: 1px solid rgba(255,215,0,0.25);
  border-radius: 16px;
  padding: 28px;
  width: 95vw;
  max-width: 95vw;
  height: 92vh;
  max-height: 92vh;
  overflow-y: auto;
  animation: fadeIn 0.25s ease;
  box-sizing: border-box;
}
.champ-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 16px;
}
.champ-pick-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,215,0,0.15);
  border-radius: 14px;
  padding: 16px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s;
}
.champ-pick-card:hover { border-color: rgba(255,215,0,0.5); background: rgba(255,215,0,0.08); transform: scale(1.04); }
.champ-pick-card img { width: 160px; height: 160px; border-radius: 12px; object-fit: cover; }
.champ-pick-name { font-size: 0.78rem; color: rgba(255,255,255,0.85); margin-top: 10px; line-height: 1.3; font-weight: 600; }
.champ-pick-tier { font-size: 0.62rem; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); margin-top: 3px; }
.champ-pick-count { font-size: 0.72rem; color: rgba(255,215,0,0.8); font-weight: 700; margin-top: 2px; }

/* ── CHAMPION DETAIL ─────────────────────────────────────────── */
.champ-detail-card {
  background: radial-gradient(ellipse at top, rgba(28,18,55,0.99), rgba(8,6,18,0.99));
  border: 1px solid rgba(255,215,0,0.38);
  border-radius: 22px;
  padding: 40px 56px 36px;
  width: 680px;
  max-width: 95vw;
  max-height: 95vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 0 60px rgba(255,215,0,0.14), 0 8px 50px rgba(0,0,0,0.9);
  animation: minePopIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.champ-detail-img { width: 380px; height: 380px; border-radius: 18px; object-fit: cover; border: 2px solid rgba(255,215,0,0.4); box-shadow: 0 0 34px rgba(255,215,0,0.22), 0 0 70px rgba(255,215,0,0.08); margin-bottom: 22px; cursor: pointer; transition: transform 0.18s; display: block; margin-left: auto; margin-right: auto; will-change: transform; }
.champ-detail-img:hover { transform: scale(1.03); box-shadow: 0 0 50px rgba(255,215,0,0.38); }
.champ-detail-tier { font-size: 0.55rem; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,215,0,0.5); margin-bottom: 4px; }
.champ-detail-name { font-size: 1rem; font-weight: 700; color: var(--gold); margin-bottom: 4px; }
.champ-detail-role { font-size: 0.68rem; color: var(--dim); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
.champ-detail-passive { font-size: 0.75rem; color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.04); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; line-height: 1.5; }
.champ-detail-phase { font-size: 0.68rem; color: rgba(100,200,255,0.7); margin-bottom: 14px; }
.champ-detail-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ── STAKING MODAL ───────────────────────────────────────────── */
.staking-modal {
  background: rgba(8,6,18,0.98);
  border: 1px solid rgba(255,215,0,0.25);
  border-radius: 16px;
  padding: 20px;
  width: 380px;
  max-width: 95vw;
  animation: fadeIn 0.25s ease;
}
.staking-body { margin-top: 12px; }
.staking-rlq-display {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(255,215,0,0.06);
  border: 1px solid rgba(255,215,0,0.15);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.staking-rate-row { display: flex; gap: 10px; margin-bottom: 12px; }
.staking-rate-box {
  flex: 1;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,215,0,0.12);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s;
}
.staking-rate-box:hover { border-color: rgba(255,215,0,0.35); background: rgba(255,215,0,0.06); }
.staking-rate-label { font-size: 0.58rem; color: var(--dim); letter-spacing: 1px; text-transform: uppercase; }
.staking-rate-val { font-size: 0.9rem; font-weight: 700; color: var(--gold); margin: 4px 0; }
.staking-rate-int { font-size: 0.7rem; color: #00FF88; }
.staking-sel-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

/* ── WORLD LORE REWARDS SECTION ─────────────────────────────── */
.lore-rewards-title { font-size:0.62rem;letter-spacing:2px;color:rgba(255,215,0,0.45);text-transform:uppercase;margin-bottom:10px; }
.lore-chest-row {
  display:flex;align-items:center;gap:12px;padding:10px;
  background:rgba(255,215,0,0.04);border:1px solid rgba(255,215,0,0.12);
  border-radius:10px;cursor:pointer;transition:all 0.18s;margin-bottom:12px;
}
.lore-chest-row:hover { border-color:rgba(255,215,0,0.3);background:rgba(255,215,0,0.07); }
.lore-chest-img { width:60px;height:60px;border-radius:8px;object-fit:cover;flex-shrink:0;border:1.5px solid rgba(255,215,0,0.25); }
.lore-chest-fallback { width:60px;height:60px;display:flex;align-items:center;justify-content:center;font-size:2rem;flex-shrink:0; }
.lore-chest-info { flex:1;min-width:0; }
.lore-chest-name { font-size:0.82rem;font-weight:700;color:#FFD700;margin-bottom:3px; }
.lore-chest-sub  { font-size:0.65rem;color:rgba(255,255,255,0.45);line-height:1.5; }
.lore-char-strip { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px; }
.lore-char-card  { cursor:pointer;text-align:center;transition:transform 0.15s; }
.lore-char-card:hover { transform:scale(1.06); }
.lore-char-card img { width:60px;height:60px;border-radius:8px;object-fit:cover;border:1.5px solid rgba(255,215,0,0.2);display:block; }
.lore-char-name-tag { font-size:0.5rem;color:rgba(255,255,255,0.45);margin-top:3px;max-width:60px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.lore-char-hint { font-size:0.6rem;color:rgba(255,255,255,0.55);text-align:center;letter-spacing:1px;margin-top:4px; }

/* ── HUD NEXT WORLD TEASER ───────────────────────────────────── */
.hud-next-world { border-top:1px solid rgba(255,215,0,0.1); padding-top:7px; margin-top:7px; }
.hud-next-world-label { font-size:0.44rem; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,215,0,0.38); margin-bottom:5px; font-weight:700; }
.hud-next-world-row { display:flex; align-items:center; gap:7px; }
.hud-next-world-img { width:32px; height:32px; border-radius:6px; object-fit:cover; border:1px solid rgba(255,215,0,0.28); flex-shrink:0; transition:transform 0.15s; }
.hud-next-world-img:hover { transform:scale(1.08); }
.hud-next-world-name { font-size:0.68rem; color:rgba(255,255,255,0.55); font-weight:600; }

/* ── WORLD INFO BUTTON (ℹ on portal) ────────────────────────── */
.world-info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,215,0,0.6);
  background: rgba(255,215,0,0.12);
  color: rgba(255,215,0,0.9);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  margin-left: 6px;
  vertical-align: middle;
  transition: all 0.2s;
  box-shadow: 0 0 8px rgba(255,215,0,0.15);
}
.world-info-btn:hover { background:rgba(255,215,0,0.28); border-color:#FFD700; color:#FFD700; box-shadow:0 0 16px rgba(255,215,0,0.35); }

/* ── MINE EXTRACTION POPUP ───────────────────────────────────── */
.mine-popup-card {
  background: radial-gradient(ellipse at top, rgba(28,18,55,0.99), rgba(8,6,18,0.99));
  border: 1px solid rgba(255,215,0,0.38);
  box-shadow: 0 0 60px rgba(255,215,0,0.14), 0 8px 50px rgba(0,0,0,0.9);
  border-radius: 22px;
  padding: 30px 36px 24px;
  width: min(340px, 88vw);
  text-align: center;
  animation: minePopIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes minePopIn {
  from { transform:scale(0.75); opacity:0; }
  to   { transform:scale(1);   opacity:1; }
}
.mine-popup-header { font-size:0.52rem; letter-spacing:3.5px; text-transform:uppercase; color:rgba(255,215,0,0.45); margin-bottom:18px; font-weight:700; }
.mine-popup-img { width:130px; height:130px; border-radius:50%; object-fit:cover; border:3px solid rgba(255,215,0,0.45); box-shadow:0 0 34px rgba(255,215,0,0.22),0 0 70px rgba(255,215,0,0.08); margin-bottom:18px; display:block; margin-left:auto; margin-right:auto; }
.mine-popup-amount { font-size:2.6rem; font-weight:900; color:#FFD700; text-shadow:0 0 24px rgba(255,215,0,0.6); margin-bottom:4px; letter-spacing:-1px; }
.mine-popup-resource { font-size:0.82rem; color:rgba(255,255,255,0.5); margin-bottom:14px; letter-spacing:1.5px; text-transform:uppercase; }
.mine-popup-bonus { font-size:0.7rem; color:#4aff88; background:rgba(74,255,136,0.08); border:1px solid rgba(74,255,136,0.25); border-radius:20px; padding:4px 14px; margin-bottom:14px; display:inline-block; }
.mine-popup-divider { height:1px; background:rgba(255,215,0,0.1); margin:0 0 12px; }
.mine-popup-total { font-size:0.68rem; color:rgba(255,255,255,0.6); margin-bottom:14px; letter-spacing:0.5px; }
.mine-popup-hint { font-size:0.5rem; color:rgba(255,255,255,0.18); letter-spacing:2px; text-transform:uppercase; }

/* ── SCAN CARD MODIFIERS (reuses mine-popup-card base) ─────────── */
.scan-mine-card { cursor:pointer; transition:transform 0.2s; margin:0 28px; will-change: transform; }
.scan-mine-card .mine-popup-img { width:160px; height:160px; }
.scan-mine-card:hover { transform:translateY(-4px); box-shadow:0 0 100px rgba(255,215,0,0.22), 0 40px 100px rgba(0,0,0,0.8); }
.scan-mine-card.iron { border-color:rgba(200,140,40,0.4); box-shadow:0 0 80px rgba(180,120,30,0.15), 0 30px 80px rgba(0,0,0,0.7); }
.scan-mine-card.iron:hover { box-shadow:0 0 100px rgba(180,120,30,0.28), 0 40px 100px rgba(0,0,0,0.8); }
.scan-card-name { font-size:1.6rem; font-weight:900; color:#FFD700; text-shadow:0 0 24px rgba(255,215,0,0.6); margin-bottom:4px; letter-spacing:-0.5px; }
.scan-card-name.iron-name { color:rgba(230,165,55,0.95); text-shadow:0 0 24px rgba(200,140,40,0.6); }
.scan-nexus-badge { color:rgba(255,215,0,0.9) !important; background:rgba(255,215,0,0.08) !important; border-color:rgba(255,215,0,0.3) !important; }
.scan-iron-badge  { color:rgba(200,140,40,0.9) !important; background:rgba(200,140,40,0.08) !important; border-color:rgba(200,140,40,0.3) !important; }

/* ── WORLD QUALIFICATION STARS ───────────────────────────────── */
.wqs-row { display:flex; gap:8px; margin:14px 0 0; }
.wqs-star {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:10px 6px;
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
  border-radius:10px; transition:all 0.3s;
}
.wqs-star.lit {
  background:rgba(255,215,0,0.08); border-color:rgba(255,215,0,0.35);
  box-shadow:0 0 14px rgba(255,215,0,0.12);
}
.wqs-icon { font-size:1.3rem; opacity:0.35; transition:all 0.3s; }
.wqs-star.lit .wqs-icon { opacity:1; filter:drop-shadow(0 0 8px rgba(255,215,0,0.7)); }
.wqs-label { font-size:0.48rem; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.6); text-align:center; line-height:1.4; }
.wqs-star.lit .wqs-label { color:rgba(255,215,0,0.7); }
.wqs-val { font-size:0.62rem; font-weight:700; color:rgba(255,255,255,0.55); }
.wqs-star.lit .wqs-val { color:#FFD700; }
.wqs-section-title { font-size:0.46rem; letter-spacing:3px; color:rgba(255,215,0,0.4); text-transform:uppercase; margin-top:20px; margin-bottom:0; font-weight:700; }

/* ── WORLD ADVANCE POPUP ─────────────────────────────────────── */
#worldAdvanceOverlay {
  display:none; position:fixed; inset:0; z-index:9600;
  background:rgba(0,0,0,0.75); backdrop-filter:blur(20px);
  align-items:center; justify-content:center;
}
.wa-card {
  position:relative; z-index:1;
  background:rgba(6,4,16,0.97); border:1px solid rgba(255,215,0,0.3);
  border-radius:20px; width:min(440px,94vw); overflow:hidden;
  box-shadow:0 0 80px rgba(255,215,0,0.15), 0 0 160px rgba(0,0,0,0.9);
  animation: waCardIn 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes waCardIn {
  from { transform:scale(0.82); opacity:0; }
  to   { transform:scale(1);    opacity:1; }
}
.wa-header {
  padding:14px 16px 10px; text-align:center;
  background:rgba(0,0,0,0.35);
  border-bottom:1px solid rgba(255,215,0,0.1);
}
.wa-banner-badge {
  display:inline-block; margin-bottom:6px;
  font-size:0.44rem; letter-spacing:4px; text-transform:uppercase;
  color:rgba(255,215,0,0.65); background:rgba(0,0,0,0.55);
  border:1px solid rgba(255,215,0,0.3); border-radius:20px; padding:4px 14px;
}
.wa-banner-name {
  font-size:1.5rem; font-weight:900; color:#FFD700;
  text-shadow:0 0 40px rgba(255,215,0,0.8); line-height:1.1;
}
.wa-body { padding:20px 24px 24px; }
.wa-subtitle { font-size:0.68rem; color:rgba(255,255,255,0.5); text-align:center; margin-bottom:16px; }
.wa-stars { display:flex; gap:8px; margin-bottom:20px; }
.wa-star {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 6px; background:rgba(255,215,0,0.07);
  border:1px solid rgba(255,215,0,0.3); border-radius:10px;
}
.wa-star-icon { font-size:1.2rem; }
.wa-star-label { font-size:0.44rem; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,215,0,0.6); text-align:center; }
.wa-actions { display:flex; gap:10px; }
.wa-btn-advance {
  flex:1; padding:12px; border-radius:12px; cursor:pointer; font-family:inherit;
  font-size:0.75rem; font-weight:700; letter-spacing:0.5px;
  background:linear-gradient(135deg, rgba(255,215,0,0.18) 0%, rgba(255,180,0,0.12) 100%);
  border:1px solid rgba(255,215,0,0.5); color:#FFD700;
  box-shadow:0 0 20px rgba(255,215,0,0.15);
  transition:all 0.2s;
}
.wa-btn-advance:hover { background:rgba(255,215,0,0.25); box-shadow:0 0 30px rgba(255,215,0,0.3); }
.wa-btn-stay {
  flex:1; padding:12px; border-radius:12px; cursor:pointer; font-family:inherit;
  font-size:0.75rem; font-weight:600;
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.45); transition:all 0.2s;
}
.wa-btn-stay:hover { background:rgba(255,255,255,0.07); color:rgba(255,255,255,0.7); }

/* ── Auto-March Alert Popup ────────────────────────────────────── */
@keyframes _mpFadeIn  { from{opacity:0} to{opacity:1} }
@keyframes _mpSlideIn { from{opacity:0;transform:scale(0.88) translateY(-18px)} to{opacity:1;transform:scale(1) translateY(0)} }

/* ── Top Gun Panel ─────────────────────────────────────────────── */
.tg-src-btn {
  font-size:0.44rem; letter-spacing:1.5px; padding:4px 10px; border-radius:5px; cursor:pointer;
  background:rgba(0,0,0,0.5); border:1px solid rgba(255,215,0,0.18); color:rgba(255,215,0,0.45);
  font-family:inherit; font-weight:700; transition:all 0.15s;
}
.tg-src-btn:hover { background:rgba(255,215,0,0.08); color:rgba(255,215,0,0.75); border-color:rgba(255,215,0,0.35); }
.tg-src-active { background:rgba(255,215,0,0.14)!important; border-color:rgba(255,215,0,0.55)!important; color:rgba(255,215,0,0.95)!important; }
.tg-mini-cell {
  height:145px; background:rgba(0,0,0,0.4); border:1px solid rgba(255,215,0,0.08);
  border-radius:7px; overflow:hidden; cursor:pointer; position:relative; transition:border-color 0.2s;
}
.tg-mini-cell:hover { border-color:rgba(255,215,0,0.3); }
.tg-mini-cell-label { position:absolute; top:5px; left:7px; z-index:2; pointer-events:none; }
.tg-mini-cell-sym { font-size:0.46rem; letter-spacing:1.5px; color:rgba(255,215,0,0.88); font-weight:700; display:block; text-shadow:0 1px 4px rgba(0,0,0,0.8); }
.tg-mini-cell-price { font-size:0.42rem; letter-spacing:0.8px; color:rgba(0,229,204,0.8); display:block; margin-top:2px; text-shadow:0 1px 4px rgba(0,0,0,0.8); }
.tg-mini-cell-canvas { position:absolute; top:0; left:0; right:0; bottom:0; }
.tg-tf-btn {
  font-size:0.46rem; letter-spacing:1px; padding:4px 9px; border-radius:4px; cursor:pointer;
  background:rgba(0,0,0,0.5); border:1px solid rgba(255,215,0,0.18); color:rgba(255,215,0,0.5);
  font-family:inherit; transition:all 0.15s;
}
.tg-tf-btn:hover { background:rgba(255,215,0,0.1); color:rgba(255,215,0,0.85); border-color:rgba(255,215,0,0.4); }
.tg-tf-active { background:rgba(255,215,0,0.15)!important; border-color:rgba(255,215,0,0.55)!important; color:rgba(255,215,0,0.95)!important; }
.tg-ctx-item { padding:6px 16px; font-size:0.48rem; letter-spacing:1px; color:rgba(255,215,0,0.75); cursor:pointer; transition:background 0.1s; white-space:nowrap; font-family:inherit; }
.tg-ctx-item:hover { background:rgba(255,215,0,0.12); color:rgba(255,215,0,1); }