@import url("/jogos/nb-games-v39.css");

body { --world-brightness: 1; }
.imperium-shell { width: min(1240px, calc(100% - 28px)); margin: auto; padding: 20px 0 64px; }
.imperium-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.imperium-back { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--games-line); border-radius: 999px; text-decoration: none; color: var(--games-muted); }
.imperium-top-actions { display: flex; align-items: center; gap: 8px; }
.imperium-badge, .imperium-help { min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid #b296ff; border-radius: 999px; color: #d9cfff; background: transparent; font-size: .78rem; font-weight: 950; letter-spacing: .1em; }
.imperium-help { cursor: pointer; }
.imperium-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 20px; }
.imperium-heading h1 { margin: 8px 0 2px; font: 800 clamp(2.4rem, 7vw, 5.5rem)/.92 Georgia, serif; letter-spacing: -.055em; }
.imperium-heading h1 span { color: #ad8cff; }
.imperium-heading p { max-width: 540px; color: var(--games-muted); line-height: 1.6; }

.imperium-settings { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.imperium-settings label { display: grid; gap: 4px; color: var(--games-muted); font-size: .76rem; }
.imperium-settings select, .imperium-settings input { min-height: 44px; accent-color: #9a78ff; }
.imperium-settings select { padding: 0 32px 0 10px; border: 1px solid var(--games-line); border-radius: 10px; color: #fff; background: #0a1730; }
.imperium-settings input { width: 112px; }

.imperium-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
.imperium-map-wrap { position: relative; min-width: 0; }
.imperium-map {
  position: relative;
  height: min(67vh, 680px);
  min-height: 470px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(164, 133, 255, .38);
  border-radius: 22px;
  background: #071022;
  cursor: grab;
  touch-action: none;
  filter: brightness(var(--world-brightness));
}
.imperium-map.is-dragging { cursor: grabbing; }
.imperium-world {
  position: absolute;
  width: 1600px;
  height: 1000px;
  transform-origin: 0 0;
  will-change: transform;
  color: #fff;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(55, 177, 229, .48), transparent 13%),
    radial-gradient(ellipse at 68% 23%, rgba(143, 89, 215, .52), transparent 16%),
    radial-gradient(ellipse at 80% 70%, rgba(30, 161, 113, .42), transparent 15%),
    radial-gradient(ellipse at 35% 72%, rgba(184, 104, 52, .5), transparent 17%),
    radial-gradient(ellipse at 50% 48%, rgba(89, 80, 191, .4), transparent 16%),
    linear-gradient(145deg, #0d3151, #131335 46%, #092237);
  clip-path: polygon(4% 13%, 24% 2%, 43% 9%, 59% 1%, 78% 11%, 97% 5%, 94% 29%, 100% 47%, 91% 64%, 97% 89%, 76% 96%, 58% 88%, 38% 99%, 20% 90%, 2% 96%, 7% 69%, 0 50%, 8% 33%);
}
.imperium-world::before { position: absolute; inset: 0; content: ""; opacity: .28; background-image: repeating-radial-gradient(ellipse at center, transparent 0 22px, rgba(255,255,255,.12) 24px, transparent 26px); background-size: 190px 140px; }
.imperium-routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.imperium-routes path { fill: none; stroke: rgba(227, 210, 255, .68); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 14 18; animation: arcane-route 7s linear infinite; }
@keyframes arcane-route { to { stroke-dashoffset: -128; } }
.realm-node { position: absolute; width: 150px; min-height: 88px; display: grid; place-items: center; padding: 12px; border: 2px solid rgba(255,255,255,.75); border-radius: 50%; color: #fff; background: rgba(7, 14, 36, .82); box-shadow: 0 0 25px var(--realm-color, #a98aff); text-align: center; cursor: pointer; }
.realm-node::before { content: "✦"; display: block; color: var(--realm-color, #a98aff); font-size: 1.5rem; }
.realm-node strong { font-size: .84rem; }
.realm-node[data-realm="lumen"] { left: 235px; top: 170px; --realm-color:#65e8ff; }
.realm-node[data-realm="umbra"] { left: 950px; top: 160px; --realm-color:#bd8aff; }
.realm-node[data-realm="aeris"] { left: 710px; top: 420px; --realm-color:#f8d272; }
.realm-node[data-realm="viridia"] { left: 1170px; top: 690px; --realm-color:#61efb6; }
.realm-node[data-realm="cinder"] { left: 360px; top: 720px; --realm-color:#ff8c6a; }
.arcane-npc { position: absolute; width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%; background: #8e69ff; box-shadow: 0 0 18px #8e69ff; pointer-events: none; animation: npc-wander 12s ease-in-out infinite alternate; }
.arcane-npc.is-two { left: 72%; top: 26%; animation-duration: 15s; animation-delay: -4s; }
.arcane-npc.is-one { left: 22%; top: 55%; }
@keyframes npc-wander { 0% { transform: translate(0,0); } 35% { transform: translate(170px,-70px); } 70% { transform: translate(290px,80px); } 100% { transform: translate(440px,-25px); } }

.map-controls { position: absolute; z-index: 6; right: 12px; bottom: 12px; display: grid; grid-template-columns: repeat(3, 46px); gap: 6px; }
.map-controls button { width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.26); border-radius: 11px; color: #fff; background: rgba(3,9,24,.85); cursor: pointer; }
.map-controls .pan-up { grid-column: 2; }
.map-controls .pan-left { grid-column: 1; grid-row: 2; }
.map-controls .map-home { grid-column: 2; grid-row: 2; }
.map-controls .pan-right { grid-column: 3; grid-row: 2; }
.map-controls .pan-down { grid-column: 2; grid-row: 3; }
.map-controls .zoom-out { grid-column: 1; grid-row: 3; }
.map-controls .zoom-in { grid-column: 3; grid-row: 3; }
.map-hint { position: absolute; z-index: 5; top: 12px; left: 12px; max-width: calc(100% - 24px); padding: 8px 11px; border-radius: 9px; color: #d7e4f6; background: rgba(3,9,24,.78); font-size: .8rem; pointer-events: none; }

.quest-panel { min-height: 470px; padding: 22px; border: 1px solid var(--games-line); border-radius: 22px; background: linear-gradient(160deg, rgba(22,25,67,.95), rgba(6,14,32,.96)); }
.quest-panel span { color: #bca6ff; font-size: .76rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.quest-panel h2 { margin: 12px 0 8px; font: 800 2rem/1 Georgia, serif; }
.quest-panel p { color: var(--games-muted); line-height: 1.6; }
.quest-panel ul { padding-left: 20px; color: #dce8f8; line-height: 1.8; }
.quest-action { width: 100%; min-height: 48px; margin-top: 12px; border: 0; border-radius: 12px; color: #0d0920; background: linear-gradient(135deg, #cebaff, #7c69ff); font-weight: 950; cursor: pointer; }
.quest-action[disabled] { opacity: .45; cursor: not-allowed; }
.imperium-status { min-height: 24px; margin: 12px 4px; color: #cabdff; }
.imperium-note { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.imperium-note span { padding: 8px 10px; border: 1px solid var(--games-line); border-radius: 999px; color: var(--games-muted); font-size: .8rem; }

@media (max-width: 880px) {
  .imperium-heading { align-items: flex-start; flex-direction: column; }
  .imperium-settings { width: 100%; justify-content: flex-start; }
  .imperium-layout { grid-template-columns: 1fr; }
  .imperium-map { height: 58vh; min-height: 430px; }
  .quest-panel { min-height: 0; }
}
@media (max-width: 520px) {
  .imperium-shell { width: min(100% - 20px, 1240px); }
  .imperium-settings label { flex: 1 1 120px; }
  .imperium-settings input, .imperium-settings select { width: 100%; }
  .imperium-map { min-height: 430px; border-radius: 16px; }
  .map-hint { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .imperium-routes path, .arcane-npc { animation: none; }
}